|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14359
- 金币
- 2465
- 威望
- 1647
- 贡献
- 1413
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! V) L/ O; i. P: `关键在于：max-width:780px;以及下面那行。0 p" D; A( f1 F1 Y& O9 K6 K
固定像素适应:3 h$ f! C1 m: W0 Y
+ F v0 F* Y, n6 N+ a" g/ v
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> 以下是引用片段：
* Q4 Z c# X; k2 [2 [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
E/ G( |6 `) s0 i2 V<html xmlns="http://www.w3.org/1999/xhtml";>
6 }+ r$ K6 ^/ {% _<head>
7 k% Z4 l/ |8 D, i( P<meta http-equiv="Content-Type" c />
D7 ]4 P; B& F; n<title>css2.0 VS ie</title> 3 J* N4 k( v3 ^$ T9 t
<style type="text/css"> # L0 k' A b+ j( W3 l' p
<!-- ) ^4 V% H6 y4 C/ r, V& E
body {
1 y) R9 N; z7 ifont-size: 12px;
$ C+ G' ]9 N$ o4 x- j; D+ t/ B7 ]text-align: center; % }1 l' e7 K0 A( f
margin: 0px; 8 Z2 t; n" i: B t+ y; c
padding: 0px; $ g" v% E9 [, [6 X) H9 i
} v! H. N1 e8 h
#pic{
7 I: U u6 L5 ? margin:0 auto;
z! Q! B8 X8 s/ ~ width:800px;
5 o% Z+ D8 P$ q( d! ]5 l5 o# ] padding:0; ! ]/ U8 r! {+ y) i; @
border:1px solid #333;
" a. Q+ K2 p/ h: [! D4 N8 @ } & p, M9 ?& }7 I: S4 C
#pic img{ 0 ^; ?, x8 ]; R7 t
max-width:780px;
, u/ h( q: j% ~6 i& J' l% uwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; ? V% X: b4 R( Q3 K9 M: G; D2 I
border:1px dashed #000;
% [: S3 W- X3 A7 J8 D/ f7 s4 D} 9 z* T! Z3 T) t
-->
: q) j& g5 O: { F</style>
: ?9 G. Y m' i! I: w; d</head> ' d; Y" l" \9 N3 R) X' c/ t2 K
<body>
6 U) u1 X6 ]! ~! u" t l<div id="pic"> 8 f. X7 g( e2 n3 s; O; P, B6 j
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. p7 O' g( k; m" Y+ k H. v</div> ) g6 O4 L/ r3 B* }+ Z! Z
</body>
6 J$ ~- g8 h' m</html>
) C Y# P( P2 K! [) f ~: u) B9 F5 ~: z1 a
百分比适应:3 F: | Y; e( J9 W
以下是引用片段：
3 o( l {" u9 g# O6 k5 L" Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % q5 M/ g2 E( [* D1 E3 t/ s
<html xmlns="http://www.w3.org/1999/xhtml";>
0 O( q/ Q/ r N$ O! w<head> 4 L) [8 g* v1 q- Y% I5 e
<meta http-equiv="Content-Type" c />
2 o( R5 ?6 K& i6 z/ J7 L<title>css2.0 VS ie</title> ) s' y3 |" k' h8 c
<style type="text/css">
8 K6 z- R6 q+ s8 X5 u$ I0 R<!-- 6 F/ j4 Y/ l$ Z7 ~* _9 N
body {
A, T, x% C, Z$ D3 J2 r( e, Wfont-size: 12px; $ B& R2 O7 f: ~/ y0 }
text-align: center; ' X7 \4 J1 V) b
margin: 0px; ( g! u4 s; T: ]
padding: 0px; 0 I1 \ t& Y% S) m. y
} & ^ U$ y& V, m
#pic{ 5 K* E7 X( Z( f4 B4 c
margin:0 auto;
; M- p! B% z$ O. M% U5 O! Y width:800px;
- G. L' ?! D9 d$ U$ O0 n+ L padding:0;
: U2 C1 S+ g* _& Y" M" E% `; ~+ B border:1px solid #333;
6 i9 S$ U/ C4 K7 z. D1 j" x) Q; b, d } 7 E7 b5 D* \0 X9 U4 |
#pic img{ / v- m1 X% e H! ^
max-width:780px; $ H8 e# y, v' p' h2 d) W- \7 @, ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : d; ~( u# P% v, H5 [/ y
border:1px dashed #000;
1 x8 Y$ ?2 l1 |: C}
: w% R0 i0 s) Y T2 V0 J-->
8 x2 Z, Y s8 s' l</style> - K/ N5 L- v" P$ V" T& [: K
</head>
3 w% ^! _* I% a% W<body> 3 E# t& D- X* Y$ P' J! n
<div id="pic"> 0 Y0 Q- u9 E6 f% o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) _/ B1 N6 b9 v0 E: `* \7 T
</div>
' Q- i! \5 O P f+ C- ?3 k</body> ! t4 K% h: }$ n1 e! K
</html> |
|
发表于 2007-12-8 14:55
| 