|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。) R/ y$ b9 e7 P; p+ c
关键在于：max-width:780px;以及下面那行。
( c7 O. D( G# S F h9 D# J固定像素适应:4 L- x7 g% o p% g9 l
5 S7 ?' @; o) N9 ^: ~6 r
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> 以下是引用片段：( ~& G. x/ x$ s( L, ~$ }6 I3 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 Q. D4 }( I. @4 Q& f) a1 g
<html xmlns="http://www.w3.org/1999/xhtml";> 2 Z+ ^2 U* v1 l2 \* X) X
<head>
! K9 c/ y+ O4 k1 u<meta http-equiv="Content-Type" c /> $ f" X+ }1 a# ^7 R+ r# f" T9 k, e
<title>css2.0 VS ie</title>
. M; W7 D O3 S8 g<style type="text/css"> . z& O/ W+ _; }5 f. b
<!-- ; U2 t) D+ ~) V, _8 J
body {
7 X- O7 K+ Y$ V/ Q7 W" T- M$ x, wfont-size: 12px; 5 s% b. p0 E3 g& w0 V- \/ A3 v/ O
text-align: center; # ^$ J4 C' p# T+ |7 Y( t# M4 l. |8 ^
margin: 0px; - N7 n* w! J5 @) \8 F" r6 x
padding: 0px;
# a% r7 [% X, Z9 ]# z}
0 t* L3 H6 V% \/ S M. G* X+ X- ]#pic{
4 `; f( m4 G7 D, }, x6 g% t3 | margin:0 auto;
% c( z" ?$ }' c' K* R: n( P width:800px;
6 q7 n! D# {$ j5 ]; ? padding:0;
. A) |+ q8 f" ~7 ~$ {+ M border:1px solid #333;
- B: ` \& K# `. e: G }
' \( y$ `- h2 e1 H" S2 T+ @ E# Z#pic img{
% x' |& g+ p5 o5 D4 e$ z# k max-width:780px;
5 G" s, g4 e& awidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ! K5 @: R- U1 {1 \) V3 _1 v1 o
border:1px dashed #000; 5 u$ C+ j4 g. Q& H' n
} 4 c3 i2 h N! {( U. l+ ?! y
--> ) P) t1 Z" X Q7 L F' k* ?
</style> $ p6 Y, c3 r# ~& D4 `
</head> , X! x* q+ {! k m, c B
<body>
2 \5 P- V" W. y+ T' i# \! X7 J p<div id="pic"> 0 T K/ _1 }/ n/ Q. y% p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + v2 O- o9 N- Z5 g! v7 U' v9 ?
</div> , A' u" L8 O- D( ^" i: l
</body>
( n& M# X' z* o</html> , f' p3 E" p* r1 Y* s6 c0 j$ d4 m
8 U' {& h) E4 @" Y百分比适应:
' z5 W0 v K* n5 {6 e9 S以下是引用片段：
. u) v, [' Z* B. {7 W4 I) q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& M" T7 Y+ @3 i2 { \<html xmlns="http://www.w3.org/1999/xhtml";> 5 d6 A2 c, |0 ~" y8 h
<head>
" A: M1 R' C [2 [2 ^: {% S<meta http-equiv="Content-Type" c /> , X5 v4 }1 C8 @$ J
<title>css2.0 VS ie</title>
7 o' [0 Z; o. f4 ^( ^. |5 `2 q<style type="text/css">
7 v0 G+ _4 d* I( x: I4 q* S$ q7 P0 D<!--
- J9 j( ?& L! ?& [8 p' v* w# Sbody { 7 @" Z6 J, V4 G9 u( t' I7 G
font-size: 12px;
8 K _/ A; R# l0 F, m4 P5 Mtext-align: center;
& J! x, k% n0 I3 f( J6 @( Xmargin: 0px; ' ^% V3 E+ E% n0 s
padding: 0px; ; D" G' I$ e. b- b& L
} ) k7 z" m6 K1 u4 F0 B7 d
#pic{ # S9 J% H& G8 ]8 F6 C7 d; D' o
margin:0 auto;
! z% r9 H5 m8 o% ~. J$ a width:800px;
0 ~+ _$ ?; f; P. W4 u. U2 n1 t z padding:0; 0 `& {9 L( h3 x/ p
border:1px solid #333;
' c* E' P# d( X/ x& y& D" x! G! R } . L8 s/ h+ r8 i; y) u* ?7 ?( B
#pic img{
S9 Y1 y$ |( @# G5 E: E max-width:780px;
" z6 v6 O* v- _; [7 N7 Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' _, a6 R# T9 m' o; A4 h# y/ O& Dborder:1px dashed #000;
+ R) W, n# e! w, q9 }- A# J} , k0 G& W9 D6 {% Y1 a
--> 5 Q3 G1 U1 O* s
</style>
' x% u8 k& u4 K' U' R& G</head>
2 X3 N7 r+ E" Y) I) M. {8 a<body>
* b& r' S+ y3 V( V# P; I3 D<div id="pic"> ) H1 F$ {' d; [: i6 s7 g" J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + t7 D$ ?+ l, j3 ]) c+ F0 ~
</div> $ F5 t* L6 D1 |2 s( l- ?
</body>
5 T+ ^8 b' a4 F" ~: @! ]8 z- \% w</html> |
|
发表于 2007-12-8 14:55
| 