|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 H. ?5 K( z- e: m关键在于：max-width:780px;以及下面那行。( m" |3 [/ L' |) y( P# x
固定像素适应:
0 W) T+ S; k- I
$ j; D) q" G+ g4 w6 D* p7 n" m# ~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> 以下是引用片段：. Q1 o$ A' |- W3 i$ Q; |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' |) B6 F# r9 h: p
<html xmlns="http://www.w3.org/1999/xhtml";> 1 @7 x2 H& J- M: K9 f
<head>
- O4 |7 a& x" w" S. x5 S- W" G<meta http-equiv="Content-Type" c />
* H* s+ p3 e4 n) w<title>css2.0 VS ie</title> 6 v- u6 J" G" X& d+ s- O2 f
<style type="text/css"> * [' D6 n; s6 X) v
<!--
; q% d. C, Z3 |$ G, Jbody {
; W' ^* ~" `5 q) `' A u& ?% Zfont-size: 12px;
- |; G9 h0 a6 X2 {/ F8 Ftext-align: center; ; [1 g n$ h8 Z0 ?2 [+ _
margin: 0px; 8 U2 s+ d; w V& u0 [$ k; F$ x
padding: 0px;
& s8 \/ i B4 b1 |. ]} - [6 e5 e ] U5 Y8 t
#pic{
( g x# h9 U9 T7 D7 J, D; { margin:0 auto; 7 g" [" r$ x7 I5 d# ? U
width:800px;
0 I; i* V {7 `, e- ^1 H1 L; a+ E8 j padding:0;
4 i' F/ p1 p6 w! t border:1px solid #333; 0 b# [% z! `. R4 A8 \% P" d' b
}
% k4 A7 P( T, M5 C#pic img{ # t2 P0 W9 k8 m1 R# Y2 u
max-width:780px;
$ j) s6 e1 y4 M6 h4 g8 i: Ewidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ n7 k* g+ N6 {" ?border:1px dashed #000; 3 U/ r0 D$ ~" j) |$ o( K
}
8 a' o( R8 u1 j) I4 d3 d--> , f- m' X! |3 l- s# d' V
</style>
# K- H& G+ b! q* f: |: Z7 f</head> - @2 z8 b" H! d- j K; c+ F
<body>
" H& u. e+ {/ ~ }" d0 z, k: a" o6 l<div id="pic"> 2 S0 c, Q0 `5 ~# j; y1 ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 W7 k* \9 v' [, \2 H</div>
' u0 R5 p; A& Y( n</body> 5 U' I; V' v: }( h
</html> $ V% V3 i" M. [# {( k. J
% O6 ~' K# o( k2 g- M
百分比适应:
8 Y8 k- I4 X) |6 _. g8 O, S以下是引用片段：2 \6 @7 T' O2 W4 ^0 B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , G( U0 F+ o1 }4 J
<html xmlns="http://www.w3.org/1999/xhtml";> + X' X" C7 k; B1 y2 A# S; s
<head>
) s; _8 W9 L! M$ y: M<meta http-equiv="Content-Type" c /> & S+ h% x/ L, z
<title>css2.0 VS ie</title> 8 K/ [ f: G# Q. k
<style type="text/css"> ' ^! u; k0 ?5 }
<!--
0 T) S% K' p* k; z. Mbody {
" j; E6 z Y9 r9 v4 ]6 d) @1 e- H, Ufont-size: 12px;
! Y2 |1 B. v. _' ], Ytext-align: center;
K% E% M# ]6 z L0 ^6 g4 Y3 ymargin: 0px; 9 P2 V5 S P; g. y3 ]
padding: 0px; 9 B& C- z5 s) A9 n6 m
}
8 d2 G; A2 ~4 q: O' U1 ]$ \" X#pic{ ; {3 `; Q) L* d$ i5 Y
margin:0 auto;
r" }9 k/ k7 a width:800px; + I3 b' Z+ w# c# |+ P, z
padding:0;
: W# } S, o! T" h, O+ ? border:1px solid #333; 4 X0 y, M1 Y3 X: p9 |
} * f# X' Q2 J# `4 l1 u, i
#pic img{ , w8 I1 B. w) i* }: _) f) _/ n
max-width:780px;
* L5 X2 G: R6 V& S8 `width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); . K" @4 U7 O2 w% b
border:1px dashed #000;
3 O: E1 w9 X5 ], E' ^* O9 i% m} 9 j3 w- e9 g) ` j
--> / w# D' n2 E2 i) b
</style> , t3 _9 O7 Z5 l2 o0 U8 t" p% C$ W
</head>
! O9 V9 I- W: g4 P% f# v: }& J" y<body> % Y6 X. ^' i1 r2 Z, g) L! E, ?' q
<div id="pic"> ; `: G6 F$ W+ x9 J2 K7 S' i+ B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 L6 `* p0 N0 {/ ^9 y4 r
</div> 7 ]. n! C5 s. {4 P
</body>
1 p; _9 n9 j+ r u" A# j' l</html> |
|
发表于 2007-12-8 14:55
| 