|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14399
- 金币
- 2485
- 威望
- 1647
- 贡献
- 1433
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ q8 K& U5 B; J/ I$ h& T3 `7 I
关键在于：max-width:780px;以及下面那行。
* O5 Q5 h1 c6 d% a! k! V$ D! ^固定像素适应:, B& u6 {+ ?, R) h- Y9 U
% l0 p8 R9 ~2 O# ^ ^
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> 以下是引用片段：3 j$ g8 T% n1 t Q( C+ k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% _ p. b- ]9 g( h7 X<html xmlns="http://www.w3.org/1999/xhtml";> 5 ^1 O% y3 Y. X# h( c# f" j2 t5 V
<head> # G3 g& V8 }3 h( d+ d! ]* T
<meta http-equiv="Content-Type" c /> ) q) M* }: D. A5 O, S5 @$ [* l
<title>css2.0 VS ie</title> + G" V1 m# w, s6 z$ F$ }1 q' f
<style type="text/css">
3 t4 M2 F/ x6 B<!-- . L" l+ u9 X! ?& U( ~
body {
9 i- i6 S7 _8 Z) M; x# Q4 l8 x7 S; ?font-size: 12px; 1 \; `) W5 p* V: S% ?% p
text-align: center;
1 B/ }# e; }5 ]* r3 p0 amargin: 0px; ' A7 z q* e( i$ H/ j" Z/ g
padding: 0px; + S0 \% a3 c5 Z
} " y7 [1 ]3 t3 ~. ?8 Z* e
#pic{ , U3 z% G5 B6 m' a9 W
margin:0 auto;
; p' ^* J/ f j, t) c width:800px;
9 L$ H/ \! M2 I+ Q ^) E, s! ]3 B N padding:0; ; ?* }* z! Q: ~9 l% S; P6 h
border:1px solid #333;
\ E8 i& n& n } ) R8 ~, ]5 f0 P, n9 G
#pic img{ # y, A) R/ M R+ l3 M [
max-width:780px; ; p" H4 ?1 n6 h; s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 X: Q& ~9 _* L# i$ N: Z$ { e
border:1px dashed #000; - C3 L& M0 i& V: A1 h# z5 z# A
}
% J+ ?# K4 \* b6 b-->
$ p" [. ^) N0 ^( R9 F3 E' l</style>
5 [; W# ` v5 O9 y</head>
3 S( {% p% q# J% ~6 K$ e0 h<body> . y! q0 [" H0 C
<div id="pic"> ! w% Q% X2 g+ s# X+ Q3 ~ t: O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
q2 b8 G; U! J! K0 e" ]( }3 q8 ]</div>
: B, a, G, O, c7 K3 @- Z$ Y</body> : ~$ t" ]8 H6 X( _
</html>
. _6 V" R: h. L" q# n1 Z4 a. i5 Q: w8 z* D
百分比适应:; d7 I- x4 V$ K
以下是引用片段：* D, \; A `4 C8 C9 g a: w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# G5 k8 I, \% Z1 v7 M<html xmlns="http://www.w3.org/1999/xhtml";> # {8 A& ^) c: X# c
<head>
" m2 ?- ?) H# V7 G" \<meta http-equiv="Content-Type" c /> / Y% i0 r/ Y) X# c5 j0 |* @3 f4 d
<title>css2.0 VS ie</title> : l" u; R6 _5 f( Z6 p) r2 l5 o i
<style type="text/css"> - f+ k+ Q' t0 \; _/ U* \
<!-- ; @& c% H/ H. R- s. g% f( ~
body {
9 t8 b" \) b- _! R: Ofont-size: 12px; , Q) l1 v2 l) s4 y. y$ [' H. Z
text-align: center; S6 S3 [* D5 \; D2 k. c, e( P. `
margin: 0px; 1 H7 N5 R' x* c; t H+ V7 e
padding: 0px; R- t& _/ w" e) x# G( y
} + f: i0 U7 ?8 K" o$ I! u. r- f$ _# B
#pic{
+ M7 e7 c* T* v- s margin:0 auto;
! X/ Y, j3 @3 c* I2 d' U width:800px;
+ ^5 x: @% X8 g* c; l5 N; q padding:0; 7 [7 r$ c+ G: g7 | g9 K
border:1px solid #333; , N3 u7 M3 c) q
}
3 b) j: w( F8 R7 N+ s X#pic img{
; l' v. Z# [& r max-width:780px; 9 E/ w" ?( p; U- i% M5 a! Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # o2 C1 Q) Q9 L' u- f/ P
border:1px dashed #000; 0 |0 F5 l6 Y4 Q! k& ]
} % X" l3 |9 ^: \, q. d$ W
--> 6 {2 q0 J8 f ^0 B6 f U; V, h" t
</style> 7 r' R+ [6 U3 m. x
</head>
) _2 [; @9 Y9 U) A9 \' X<body>
6 \8 j1 q, Q! E4 R" V8 c7 ~1 l1 o* }<div id="pic"> + w; k5 f& E2 X' `5 ^1 `: Y. K, T }
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; b v5 A: k( J) G) c0 r9 Y
</div> + j$ | b" ^: w @5 D) h% B" ~
</body>
1 H- [! W+ T+ {2 t, }; f6 Q" O* a</html> |
|
发表于 2007-12-8 14:55
| 