|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14369
- 金币
- 2470
- 威望
- 1647
- 贡献
- 1418
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: m$ q. h5 z* J: d关键在于：max-width:780px;以及下面那行。
2 M6 k) g$ a9 p6 B固定像素适应:
0 l+ [( n: H8 b: [% r$ W
" c( i& N8 N5 G7 r. hdotted; 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> 以下是引用片段：
$ H% f" Q2 f4 O% B1 O; k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ o5 V0 p9 O# \% _<html xmlns="http://www.w3.org/1999/xhtml";>
. K* T4 W* z9 K8 Z {<head>
$ N l* Z% ~, o0 O# W<meta http-equiv="Content-Type" c /> " F. M2 l- Y6 s6 }7 ^$ R8 _
<title>css2.0 VS ie</title> & n, Z. q7 r# X; H7 n; P5 K/ D* t
<style type="text/css"> - J/ W1 `- S3 a4 j! M% z
<!--
9 t E6 j1 K8 a. ]body { ! x+ x0 Z% x; ^* q) g
font-size: 12px;
, r8 r! U4 E/ u5 J$ N& h. ~, m2 Htext-align: center;
' B7 ~2 R8 j) emargin: 0px;
; @! C4 x4 x$ P9 C4 W+ S; Qpadding: 0px;
) t$ K9 }4 C# h% K! ^}
$ W3 B. n8 t4 P; F0 D$ [#pic{
' R1 k; N. V7 H/ K G( g: m P( u margin:0 auto;
% p( k- I" b$ n2 Z width:800px; # y0 S# Z# G- H% y* Q9 _8 A
padding:0; 1 Y4 W3 o8 U* w1 |
border:1px solid #333;
4 s* ?7 D) i2 `; R& {* p) ] } # n# t+ C5 j9 L# o
#pic img{
9 t2 `& j* G' t6 Y: k2 L max-width:780px; , Q( r3 [: I$ Y* i8 l R) V
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 |- w5 [+ \4 ]* |5 G' N& o5 e7 [9 wborder:1px dashed #000; % ~' _' k1 ]- P! C
}
5 q; v3 [' M6 d. g-->
9 q% w" A/ t0 b$ J2 u</style>
2 l1 T! j! F& }: b9 {</head> 4 F- D& W/ k6 A8 ~/ n
<body> + M8 Q3 Q' C% m: N) A: `+ |
<div id="pic">
. s7 Z$ `- T+ A- R<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 q6 u6 `- g7 Q: S9 _* P</div> ; Y$ r0 I+ t1 i$ K- T/ _% J: F. \
</body>
) R( R U, O8 ?; X$ e</html>
% R5 Q9 A* \) I! p% v$ v ~( `6 a9 o z9 J/ ?
百分比适应:: P6 |( d8 Z9 o; j& X
以下是引用片段：
: [8 e. n0 h6 W) g! r( I' t5 `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. S5 {, V1 s$ r7 T<html xmlns="http://www.w3.org/1999/xhtml";> / O* W* D/ L' Y* e' |
<head> " r' ~; b+ `7 \4 P5 I8 _
<meta http-equiv="Content-Type" c />
& R( I, R5 o* u) H! r: k<title>css2.0 VS ie</title>
* G1 n% B6 W1 E. Q$ ~ r<style type="text/css">
! b* N/ J" e" U. m0 l! q; }<!--
# w& Z( `3 j: ?: ~body { I) y' Z R6 y" b
font-size: 12px; " V' k2 l" s/ p* Y6 ?4 D
text-align: center; - n6 K s6 V8 e- g
margin: 0px; 7 M$ N6 T" \9 W8 }% C5 ~
padding: 0px;
9 Q8 I0 I0 ~5 J& }4 i$ Z} 5 N* u) B. W& |" M& L% Y
#pic{ " ^: x2 e8 i" n6 u0 K8 b
margin:0 auto; - F4 w% B- ?$ l, r( p _
width:800px; ; j5 [: {0 Z' W) w# l ?; p
padding:0;
; I. I0 w# Y) } border:1px solid #333; 6 `9 X7 w5 N% U. j6 |) a* {
}
8 {, u u% R3 R2 j#pic img{
2 S, _& H+ ~. s7 N, a h max-width:780px;
: b. Q: t( t+ S8 q" R/ G& F$ d5 mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 1 O& W: Y/ ]2 G0 H& ^$ ^8 Z2 |- @& f
border:1px dashed #000;
# |1 n/ v. b/ q$ b. L$ H' `( G}
8 j2 G% T8 {" r# k" c/ t--> 9 }: A# p- K, |' j# n
</style> 1 ~, F! o+ |: s8 O) y9 i: U
</head> ( U3 ?7 f$ ?3 L
<body>
6 i$ e/ m+ y6 p6 d6 j7 N3 D<div id="pic"> $ ^0 N9 c3 f, C* Y0 }0 k1 D% U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # _' f, P' `; S7 \
</div> # \ i: w% N% ? x) M
</body> 8 }, ?0 ^4 b4 n8 Q d, G
</html> |
|
发表于 2007-12-8 14:55
| 