|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14361
- 金币
- 2466
- 威望
- 1647
- 贡献
- 1414
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 \) U! Z' B+ R" H* J! z( B# N* z" ^
关键在于：max-width:780px;以及下面那行。
% I! A4 m) L1 f" V# W固定像素适应:
) C+ B o+ c6 N. x6 v$ u: J2 u) v1 {3 z5 ~3 {& s2 G* P
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> 以下是引用片段：! i- _* O. e( j2 V/ M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! N/ y! s. f/ g* w
<html xmlns="http://www.w3.org/1999/xhtml";> 4 M. I4 g8 B" M/ g E; X5 E
<head> # d G- R* z. J7 {) Q
<meta http-equiv="Content-Type" c />
, u# l1 z/ _9 r) u! l5 G# |<title>css2.0 VS ie</title>
* M( u$ z9 k0 n$ G; a' H<style type="text/css">
* g3 @! v2 b9 z2 c* T: F& C<!-- * h) K' I4 o' S g5 d5 ?# A8 O
body { $ C( c/ ^& ^0 Q- m3 y2 P4 ^- |( H
font-size: 12px;
# Y; _' [9 M. @0 Y5 Rtext-align: center;
0 s% `/ h! e. Omargin: 0px; 3 \) j c5 }, o4 T: s# N
padding: 0px; : U- P. w3 v" N9 y
}
7 S8 [' s9 o d#pic{ 9 ?! c7 n( Y! l9 J% K& [6 }
margin:0 auto; ! B% V; M$ x7 s3 b+ t
width:800px;
8 H) T s5 M: r3 \9 | padding:0; ; a" C$ @5 K& N7 U& H
border:1px solid #333;
0 D7 |8 D% }- ]9 r' h6 C( W }
! _7 q4 U+ x4 T* m& J3 I$ a#pic img{
4 X( t, s( j' Z* X) F$ S max-width:780px;
% I; T! `8 F, d+ ^7 ~7 z' v/ ^9 p1 Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); . P9 f, B# r: K# {3 }9 v
border:1px dashed #000; ; c& v# o# {1 B m U
}
: Y+ t' E, p6 t% l--> : r9 U+ i) G( G
</style> 7 L' {8 p8 o* K
</head> + I8 L. ` F7 z" t" Q6 J/ v, b
<body>
! ~: X% U& E% W/ y<div id="pic"> 9 j# C/ ?8 h: h( h$ Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- \, R9 t; s3 ]1 }6 w$ I3 |- E</div>
9 C! m# l, q) X3 p6 f4 ?$ S) y& p</body> - F" m! `. u9 }0 [
</html> 7 {- W1 j8 y* }+ j/ V
# v B$ X- d: ]) L: P$ N/ X& w百分比适应:
/ O/ E* r! h% S S q0 O以下是引用片段：1 o* L8 O9 u, o1 R4 Q' X6 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # R L. n% T# B/ N0 N* r, Q
<html xmlns="http://www.w3.org/1999/xhtml";>
2 H: W6 ^3 s3 n' c& o<head> * g+ Y! O% z+ V6 u4 u. ]& E8 T8 J
<meta http-equiv="Content-Type" c /> & {; f- b* @6 { R0 k, g
<title>css2.0 VS ie</title>
7 v. u9 B; b" J7 X<style type="text/css"> 5 c0 r" ?& P$ f, A" A
<!--
& Q4 V4 T# K, M. cbody { ' S/ p2 N# I! [: w6 U- k* {
font-size: 12px; 9 H. \. S* ?( |' l5 ]) l
text-align: center;
# F" m) T: O# I7 I; ?' m: l1 l0 l# `margin: 0px;
% e( ^# G$ A* L! l0 I: x5 ipadding: 0px;
9 |! E$ [9 h& ^9 m) A} ) Z- a* Y9 F: X
#pic{
9 |0 u$ P/ I0 |. Z" j2 } margin:0 auto; / E: f; L% x6 S2 c3 k
width:800px;
" X% ~) C# Y% i padding:0; $ U% G6 w' }0 x: }# P- c6 ?5 K) N
border:1px solid #333;
9 `6 J2 F1 {+ V) Z1 {" x2 L" q# | }
2 S% P& q' i0 N$ l#pic img{
8 E# g, X j4 e! P0 V max-width:780px;
) i5 {! F) S* r0 L8 Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 O% F# `4 B, D: Y6 L$ v# @border:1px dashed #000; / D$ w) n6 T5 X/ W
} 7 W. |1 \: Q) L& [4 U2 k: ^
-->
9 t3 q4 F5 x+ `6 P4 y5 n9 P9 I6 X. m</style> 3 y3 x- @! A5 p$ r1 [! b# D' Y
</head>
2 m6 k2 B) t! J( ?& o! u<body> % i! u; r) G% {# s' G8 C
<div id="pic">
) O0 T3 i$ a- B6 W<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 r- K& ?! U4 c# Z( N
</div>
- A t/ r% w: L+ ?# h& X- u+ j</body> ' l6 i+ W% T, A9 e
</html> |
|
发表于 2007-12-8 14:55
| 