|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14343
- 金币
- 2457
- 威望
- 1647
- 贡献
- 1405
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: R3 u/ n6 [4 Z/ n1 p关键在于：max-width:780px;以及下面那行。9 O; l5 D6 a! \0 K: s
固定像素适应:+ P9 M! c N7 m: Y+ K; O# E( U6 a
+ d8 \2 K+ Y0 y, mdotted; 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> 以下是引用片段：
4 L/ D4 D1 b; r" z4 i4 K5 U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % k3 E3 q# J, A" t
<html xmlns="http://www.w3.org/1999/xhtml";> ) a& {* a$ M. ?
<head> 0 _/ I6 W: q0 {7 h( `+ ^! k+ O/ {( |9 p
<meta http-equiv="Content-Type" c />
1 M |* S8 ~. m1 `9 n<title>css2.0 VS ie</title> , Y# a$ a# B; R( @ z1 R( z
<style type="text/css">
5 ~ y; h, Z+ J1 L! a<!-- & z! J, A% A9 S; G% y- o7 I
body { $ O! _* i1 o) a4 E* O
font-size: 12px; 7 O+ q1 F6 j& U! G$ [* A$ k
text-align: center;
' _2 a& A; J- F% \: E" ~1 mmargin: 0px;
) Y# U8 O4 d7 v; C3 W5 ~padding: 0px; 6 m9 w7 ?. |7 r& N
}
: y4 S' u) x* |; @2 W: [$ X#pic{
, l" ?$ e* y/ `% u5 } margin:0 auto; ; u' { V9 S1 ^) g& O) ~$ {7 G1 N- L
width:800px; # j& R) G7 v. u* J- W$ d% b
padding:0; ) Q. J% h; T( H4 ?0 Q* f/ P# g
border:1px solid #333;
% @6 ?8 T2 ?! x c$ T7 P }
0 H. U: Y0 m# w/ u#pic img{
* |4 w1 u0 o+ @, }" f1 U max-width:780px; . i, u( G% d D, ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% @ t& Q8 U3 p; x! U. Xborder:1px dashed #000; . G# Y v: R6 e9 j
} 7 x5 I6 t' j1 P2 r6 d3 H! F! o
--> # H$ E8 k9 I* t8 [ t+ G- [
</style> 4 y# K" I4 n5 g- u0 C: V: m
</head> 8 e4 M5 S9 z! r4 C2 w
<body>
6 O& w6 v; ~& }+ A. o<div id="pic">
" ]) s% \6 C$ \6 l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ L/ o2 W* x& B- ^3 K" j</div> $ D2 B# l. s$ d$ m
</body>
' k a) [' p* ^* M/ n1 l# C/ b8 T</html> & ~# y7 m6 I& v4 \7 W
) j! x. ?% X$ u( f
百分比适应:7 y; e3 ?. j& {
以下是引用片段：8 W# ` K% W0 c8 [5 _2 z! H$ p: f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ ]0 V- f& r+ l( v3 G. x% j<html xmlns="http://www.w3.org/1999/xhtml";> & I* n% |: o, J; T |% r' P
<head> D& W$ }+ O7 y- ` G& j
<meta http-equiv="Content-Type" c />
$ H' ^1 {7 ^% e: Y& K; e<title>css2.0 VS ie</title> p2 p/ ^/ x( P: g+ A0 A, y
<style type="text/css">
. s+ v7 N# Y+ @$ a# `<!-- . k4 I5 L* `3 b& Z/ \: _6 b1 G9 n4 E
body { * G& @, V% u& P* ^- _
font-size: 12px; : w/ O2 O% G9 v" s, ]. h2 B: s
text-align: center;
* i$ n B; A, f3 o5 b8 tmargin: 0px; ) G: a; z4 k) D' w0 y$ L& F. ^ g! d
padding: 0px; . }- n0 P4 ?' P
}
9 U, ~/ _. G3 ^ N2 Y8 F0 Y; U#pic{ * T, j2 U& B- |/ o" K$ D2 R
margin:0 auto;
) ?; V" s' q$ b1 p+ ]1 { width:800px; 2 B+ K# F8 t) Z, T, d7 h2 k
padding:0; ; S. e5 r( e* V7 v( G
border:1px solid #333;
6 `4 B. s) k+ b }
& U8 G: B' A! \& t8 o; L, `+ }' G% _#pic img{ / u. V/ c. h# j$ H% b! U
max-width:780px; 8 Y& G% G$ h" ?$ v9 C5 u6 P( |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3 P" }" \, w! J* u
border:1px dashed #000; 7 X) I7 u( `. D
}
1 t8 r9 C$ K+ q7 ^- W/ V* N-->
! r$ X5 s" E# S/ v</style> " v) ?* ~0 b d) ^6 A
</head> 1 v" ^; K* ~% f0 B. B. b- ]
<body>
, C. f9 w5 a6 O<div id="pic">
6 D3 G r7 ^) q' y2 ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; T! x7 ^; M% L" a% ?. }</div> " H/ c: N* H3 [0 I
</body>
& C5 r/ g- P8 M: T</html> |
|
发表于 2007-12-8 14:55
| 