|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 ] @" j( [. S- y( k关键在于：max-width:780px;以及下面那行。
7 w: J& o. M5 H# t2 w0 D. C! w9 G固定像素适应:
* Q3 z/ v; H0 v7 M2 X: q
0 O/ H. e# F$ {! J# Kdotted; 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> 以下是引用片段：7 O6 u0 _) Z1 Z1 @$ S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # x: Z; j) Z0 R, U
<html xmlns="http://www.w3.org/1999/xhtml";>
3 [ k( f" W8 U& N* O3 S<head>
d- E8 U" n8 c6 I, P3 `<meta http-equiv="Content-Type" c />
% ~0 U, m* L& a7 v<title>css2.0 VS ie</title> , P2 F# w8 P$ h8 e
<style type="text/css"> & P: h: [ V1 q; `& l! l
<!-- ( x. C5 ~9 W& O' C2 g" R& O
body { 4 D' r- T l6 b( V a
font-size: 12px;
0 v: C* B6 G% x+ ]# Y) ntext-align: center;
J5 B3 ? w' ^9 g1 Umargin: 0px; 2 [# s+ |# D' A6 S
padding: 0px; ) g. A/ k) ~4 x
} ' v( z( J5 H1 a
#pic{ : j2 O7 O K% r" w
margin:0 auto;
4 L" k0 Z& P& v width:800px; ' ?, o( G; U) v# B+ m- ?
padding:0;
7 x2 M F: b/ n0 F border:1px solid #333;
4 n2 J7 w# h1 S* ^* _ V8 r+ w } 6 t& T# Q% m" q& L7 ~0 Z7 R; l \$ d
#pic img{
1 W: L& X$ n% \1 X max-width:780px; , Y2 q" c1 o) p# q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; n: n% U+ U' t7 |. R) v d7 H- yborder:1px dashed #000;
+ A9 h9 b! ?3 h+ c}
- V- L9 J t; e m: ~+ j3 E3 Z--> ! M: N d2 C9 }
</style>
7 H* ~6 \4 t1 g: m</head> & V: e7 L- A+ d' d
<body>
; @3 S- J& v! q1 j$ j<div id="pic">
; f7 o1 c# L+ b6 o1 ~- _<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + }; {+ y& U$ ^9 Z5 V
</div>
5 z, Y7 z; N/ R! f& m</body>
% Z1 ?! R; O, M9 Z! X</html>
0 ?. |/ Q9 F+ w# h/ d% m* d. r" V! K
百分比适应:5 z$ ]( ?+ U2 {) W$ Z$ H! T( K {
以下是引用片段：
, _, U7 |$ f" F" ~* _: I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / U: f' ? \* q. U1 v: f! v
<html xmlns="http://www.w3.org/1999/xhtml";>
2 r4 O3 j) ]. k4 {& u<head>
3 A, C! R9 n' f7 n1 Z<meta http-equiv="Content-Type" c /> % ~( i( @* b) p" ~% ] ^) k' E
<title>css2.0 VS ie</title>
) ?5 o! F7 k% L7 n<style type="text/css">
& X" G* l9 i8 _: B* @, _' ^<!-- 8 R2 z! M- R. y4 P
body { - A- b7 ^1 L h1 S+ w( ~
font-size: 12px;
) m3 a9 ~8 k; a- x3 Ftext-align: center; & ~. f2 K6 m$ F0 @- q( F: X
margin: 0px;
" I, l# K1 w1 Z7 ypadding: 0px; 7 z9 o+ g9 X0 A) m& F
} 6 r7 I4 A) L3 N; P: {* I6 r
#pic{ h" X, y' H& }8 a7 f/ J3 \- R
margin:0 auto; / E6 b/ D+ H z+ X! ?5 r; o* k
width:800px;
+ a2 y6 O7 V; ?1 u padding:0; 7 U6 P( b( N: @& M" T' e3 R
border:1px solid #333;
* O2 T- e/ S2 v7 X; }+ @, l3 c( h2 L/ J } 1 v! |" P. M# q1 _' y+ t6 H, w7 F
#pic img{ + a7 o2 U/ L4 G
max-width:780px; 2 l. ?! ^6 W4 {2 C1 g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; J# [2 m) j7 M: m# V- H' a; @border:1px dashed #000; * s# p3 r, q) w& P& h4 ^" T
}
6 D! h2 ?% t+ @-->
) J2 J5 ]# V$ C( X</style> n& g) Q3 q4 w: Y9 ?- U- f
</head>
( b; J( H5 W" ?0 W# {- D2 }' c" ?<body>
; I! T% `( s$ Q4 b" V* @2 R6 Y<div id="pic"> ' a2 g) ~ e4 m4 X; ?, Z! w7 k% P: u! o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, e6 ^/ |) k. h B+ [# {</div> 2 Q* B* S0 a, y/ G, t9 e* S
</body> ) J& ?0 o- t- H4 o- }) m
</html> |
|
发表于 2007-12-8 14:55
| 