|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14391
- 金币
- 2481
- 威望
- 1647
- 贡献
- 1429
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 U/ H0 L( W4 `2 L5 N9 O! P: N
关键在于：max-width:780px;以及下面那行。
" p" R+ |4 ]3 U. @固定像素适应:- `1 c4 V @. ]) q7 }& J. `5 G# I
, b L8 o: ~6 w+ E* m. j% z8 ?+ Odotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：
4 ?! ^* x3 x. V! p6 s% P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . ` v0 f5 |1 ]1 J% _/ q+ g0 Z" a0 {9 A
<html xmlns="http://www.w3.org/1999/xhtml";> 5 A1 Q8 L' c' y5 h% @/ ?, E
<head> 8 ~7 m0 d: B. Q
<meta http-equiv="Content-Type" c />
1 e9 W' w9 K/ A( H; u Y<title>css2.0 VS ie</title>
2 j2 V) ~" X; F# f: a+ s<style type="text/css">
5 ?+ ?* s. T9 d<!--
! i( y) D1 \- [& l/ D! A+ dbody {
+ R; K6 C4 Q% O ?) ~ K ?) v h; hfont-size: 12px;
6 N5 Z5 g- V$ r1 K) l: ^! D5 qtext-align: center;
5 t! I& A; \2 a/ fmargin: 0px;
+ a9 ^3 n4 g: J8 a1 {4 Ipadding: 0px;
( V+ K5 d w; ?3 C- W9 u, s} 2 x! L* ]1 V1 H+ V, K: I1 C. ^0 v" n
#pic{ # E. p! G" T+ n+ \# ^7 O3 m
margin:0 auto; - E9 }2 N& N4 G# F4 P. s/ a
width:800px; 2 @1 c E8 C) O- ^
padding:0;
" P9 a/ j4 r5 c: A7 H) ~7 `" N7 E border:1px solid #333;
3 d2 c& v2 \* Z' f0 [; g }
% z9 [$ S3 ~6 r# a8 @2 \, A2 y#pic img{
0 M6 y* y( j+ ~$ T- z: U+ m max-width:780px; ) q% a7 z0 l: k6 @
width:expression(document.body.clientWidth > 780? "780px": "auto" ); * F* S& i' l' c' ^; I3 u9 m0 }
border:1px dashed #000; # z4 V, m" s" U6 N4 c: V8 v3 j% f3 U
}
4 m4 s2 k- j }0 n1 j-->
% i: _8 F6 Z! D* z+ W* ]</style>
4 z) C- \; F" E2 r</head>
& ]" f% y; z) Z) y/ u5 y<body>
0 A0 l- o: a; y( ]' m ]: \: ~<div id="pic">
4 |) G& q& }4 W3 X& A/ j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( i4 L. f& y7 O4 G& [* b
</div> $ h* C& ?) s) \: l
</body> $ [7 K+ M8 x4 r) g# ^ c7 o3 \
</html>
% s8 z* ?+ P( N3 w
3 Z" {) h. I* M; Q百分比适应:
# `. Y% C- a1 _ Z( u8 }以下是引用片段：
( C1 P! S; g0 N1 s8 l<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> {& U2 T3 J* A
<html xmlns="http://www.w3.org/1999/xhtml";> / X* d9 Z3 h: B4 I
<head>
v- V: |4 X+ C' L7 y( p) {7 L<meta http-equiv="Content-Type" c /> 3 D7 n7 p o. X# s
<title>css2.0 VS ie</title>
7 C$ D: M& f9 Z" _1 @; w* p- q<style type="text/css"> 2 |- ~' C% F$ k/ G, H+ \
<!-- 7 {( M5 v7 g* x3 g' C. [9 R
body {
: X3 g8 N& X1 {/ S3 |, Dfont-size: 12px;
* P+ M+ v$ p1 wtext-align: center;
! l c0 Q# R# jmargin: 0px;
6 g3 J5 ]$ k# hpadding: 0px; * R* T0 I/ g7 u
}
4 m7 h% q3 k5 u. C#pic{
/ j5 l% t7 \3 n# x x margin:0 auto; . _4 R/ M' @3 [9 h9 b8 m3 h3 Z q
width:800px;
5 O p9 T! j2 G6 I! h1 Y3 y/ S padding:0;
$ r: a8 K( N8 ~: j border:1px solid #333; - B+ k7 b, \) l' `" y' R& B
} ; d# W% b2 o; W4 v
#pic img{
7 v7 B7 }. P2 O max-width:780px;
$ f9 w" h: q% O+ |, Z2 X) C: Gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% W, Q" X! `& D! F( a( Hborder:1px dashed #000;
# I% U! @" a% [$ Z, r}
+ ~9 a+ H) a$ \9 `* k--> % l8 u* o6 Z, J4 ~' G* H% k1 G
</style>
4 [3 [7 C1 m: @/ E5 D0 w: A8 w</head> ! Q$ R5 q8 q6 ?( I4 \) v: T
<body> ( _: G1 G. v- Z0 g
<div id="pic">
2 [0 d. {2 |: E* T, d# f* f<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 k+ ?; f% C% C& Q
</div> - y3 Z; ~! M; e" R& l+ l. S
</body>
6 f# d" V6 R0 d4 J</html> |
|
发表于 2007-12-8 14:55
| 