|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14433
- 金币
- 2502
- 威望
- 1647
- 贡献
- 1450
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
e- j% M0 d4 p" n |关键在于：max-width:780px;以及下面那行。
# H. R& S0 J7 o2 I) K; |' I7 _固定像素适应:
& R3 H- ?! K6 s& u( G! ^
, G2 @) q3 Q6 E2 ?dotted; 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> 以下是引用片段：$ e# Y" @( d: H7 s" ]. f3 v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 p6 ]" f% {, K1 e* H<html xmlns="http://www.w3.org/1999/xhtml";>
, K, Q. g2 B. k8 j: q4 @<head> ( w$ Q& O) X% t0 A" ^. A! k6 I
<meta http-equiv="Content-Type" c />
( x5 k B. ~% ~2 U. p) L0 j<title>css2.0 VS ie</title> ; H) y' c( ]# i2 P$ H1 w
<style type="text/css">
h) _4 h0 x a% i( h1 y5 H<!--
" W7 D' k, B* [/ K) J$ Obody {
& O x# N- D. h) n3 A1 H& zfont-size: 12px; 6 B1 t7 q, M" x: }( T+ v; L9 r
text-align: center;
3 y Q8 {7 X7 Gmargin: 0px;
3 m$ C# g# u. M1 T% W* |$ R9 ppadding: 0px; P- ~; ?9 p6 e' l, M
} + ?& @4 c4 x8 f4 p$ g+ B
#pic{ 5 Y1 ^9 G6 ~0 G2 j0 S5 l: M
margin:0 auto;
# l" c: O+ D2 m$ p0 z% \ width:800px;
0 D4 c, P+ m) h2 V padding:0;
9 h {0 t/ W: p. L border:1px solid #333;
9 \6 [' e; W3 G- a7 O6 p) k } , _/ V- E5 n$ d) ?- w2 {/ H
#pic img{ ! q( _* q5 L" j2 X
max-width:780px; * L w p0 ~) k+ t4 U% Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% B! g& ~* A9 e% Cborder:1px dashed #000;
5 q& S; c8 y: m6 E9 H" r3 p}
; T3 a& j3 r% e7 d; s7 F) b--> , ?, \+ x: g; @+ Z7 c! D9 Y
</style>
7 h5 N [. k0 Z; p% C! T</head>
2 G$ P8 v$ g" a2 [9 b1 I+ A<body>
) s5 s% c2 M1 h' k<div id="pic"> " M7 S0 g1 E2 T- O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " C7 O6 G( w$ l9 k {" p' x
</div>
3 g' N3 b3 S4 K6 G% ^</body> " h% U+ h$ m; G, \+ u
</html>
- U8 o+ K, \9 p ^7 G% t+ j
" B# X5 `4 @' a! U- e: a. v百分比适应:
; x9 g# Z( v- A以下是引用片段：
" v1 W2 O6 j! }0 F" i; B<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # S6 t* o* k9 G9 x
<html xmlns="http://www.w3.org/1999/xhtml";> ! ~' [) X$ Q- K% P/ T% B$ l D
<head>
- k+ A5 I' Y+ f: c<meta http-equiv="Content-Type" c /> 7 j% `$ a4 I3 n- b6 W. p
<title>css2.0 VS ie</title>
0 ^2 E( {2 m$ X& E" u; O& _ ~<style type="text/css"> ! I- v( G. H- _& y8 t, m4 V7 Y
<!-- : g/ J- f. Y" Q; i$ f
body {
0 W$ `* s; n5 h' X8 v6 Q: hfont-size: 12px; / o6 q6 x# }2 \: }' Q6 W/ t2 p
text-align: center; / S5 B, y6 P3 i& N1 W" \0 o0 L9 g
margin: 0px; : x4 j- k% S- R
padding: 0px;
3 S$ O, d6 i9 I( I3 Z9 ?8 j}
, }) y' M8 {5 e# S6 l#pic{ ) Y9 V& H. J" x) o9 f' o* U2 h
margin:0 auto;
2 Z9 C% Z5 z) `5 j! }4 [ [* k width:800px; ( t8 V0 ]8 W0 ^* a1 i) h
padding:0; 6 H, X. I/ W- O- W! H
border:1px solid #333; 9 J9 F7 g6 L$ c; E& s( p
}
" ~" {& R; |) w; Y5 z0 ]' _# j#pic img{ ! U/ l% z/ Z7 I5 B0 K1 O
max-width:780px;
- e8 b$ v. z9 Hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 R- d8 w. v/ \: f7 k' k
border:1px dashed #000;
% Y/ @8 g7 i+ d6 k+ X$ ~} 1 ]! h1 J, F5 H3 n. e, L
-->
4 I5 T5 ]2 }. z" S% ~/ v</style>
* }4 v+ Z; |9 h$ l</head>
, e3 h F4 `6 |. o6 W: Q<body>
; A5 w2 T" b# k: ?4 J* q9 _$ ]<div id="pic"> 9 K7 ^5 F/ j0 S: e }: D" I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ h6 P6 R" h; _2 t</div>
3 v* S5 _# W0 J3 @ ]</body> , }/ `& c+ h. e0 Z6 ^6 b8 k# ~# U: w
</html> |
|
发表于 2007-12-8 14:55
| 