|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14281
- 金币
- 2431
- 威望
- 1647
- 贡献
- 1379
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ I, S8 x) s2 ^0 g0 V( m* s
关键在于：max-width:780px;以及下面那行。
- K! g3 `2 R& Y1 r固定像素适应:
- l3 {* X6 A; p+ ~ I
. R3 F( z6 d/ w" I- ]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> 以下是引用片段：( r5 \$ m$ L0 V# }/ p0 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' x' @5 C( [7 n- N, H/ p
<html xmlns="http://www.w3.org/1999/xhtml";>
; I5 v! S! Z) P+ c J% j<head> 0 p+ a6 l0 T9 Z2 R; H2 { J
<meta http-equiv="Content-Type" c />
5 ?- K- c6 N' t& |) m' l<title>css2.0 VS ie</title> 3 n( p7 y! m/ X& Y) Z7 V$ \& S
<style type="text/css">
8 N2 U8 C; j& V) O4 c& N! b' p; G<!--
6 b$ R. D S' c& |# Q4 abody {
' W. @; c# h& K. W8 d, Y$ Ufont-size: 12px;
5 B4 o! T5 ^ B# ]text-align: center;
! o+ d; |0 l" V {" ^6 A/ p+ Omargin: 0px; A( y% B; I% ?: W
padding: 0px; ' H8 M, k* s' f; ^' M9 E
} ) Z7 ]1 s) |2 v5 e- q, m' z
#pic{
2 G3 ~* h3 N6 t, J+ } margin:0 auto;
u' u* c( e& ~, h' y8 D width:800px;
$ u9 P( m4 u( P4 {/ K padding:0; $ j3 t% |7 l; X% a! z$ O( ]
border:1px solid #333;
2 ?- m( k& c; |( _) t } # k) |: y$ I& H3 U
#pic img{
( F) J+ j/ K- v& ?; u max-width:780px;
; ?4 x0 r: U7 Z+ w$ D' `/ d, p6 [width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 V+ Z; K: k2 w1 T) R( G2 i* y0 H( v
border:1px dashed #000; 2 Q W' m9 t+ H R
} 0 l& F' U# E' | z1 o4 P: r
--> 5 Q, h7 W: m7 o' t) v$ _8 s5 k6 d1 U
</style> & x* ?7 R- T- v. H$ x; h
</head>
; }: n& p0 K0 w7 h/ @<body>
8 n0 a0 ]; @& O# P9 `<div id="pic">
0 N. b$ b J0 X8 Z) \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - z# I; {3 M7 n1 s) M
</div>
/ R: ~& ~( g' ^! N, w& b</body> 2 c, B; Z9 [) m; z" p
</html>
# ^$ ?+ u& j& z+ s" x+ L. J2 X9 q! B% @; C& @9 H9 v
百分比适应:
, T5 X9 F( U- Y0 Q以下是引用片段：* B' K4 I) m) n$ y: E/ p+ E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ U8 N; s* R" w1 _5 h1 X<html xmlns="http://www.w3.org/1999/xhtml";>
, U' I2 [3 ?$ i, z0 s4 y1 }. ]<head>
/ n3 z' d8 B, P! R7 A$ I5 X<meta http-equiv="Content-Type" c /> 9 @' `& d/ i* e- [' e
<title>css2.0 VS ie</title>
( x5 B+ n, ]) x6 q8 ?<style type="text/css"> ' r/ K& C1 c6 f
<!--
8 o4 V% n3 C: y8 [) Tbody {
$ N+ K6 t& J" @9 Efont-size: 12px; . q% b5 K/ S5 e/ Z% S
text-align: center;
" f" K/ O! a8 u. c1 T; |margin: 0px; + d9 v/ R8 [0 z
padding: 0px;
7 h- o" d" [/ `3 {( M' Q}
0 g% m* ? ^0 r* a5 ]#pic{ 4 T! ]7 Y" ~; F" q. X, K
margin:0 auto; e( O; t6 I& F! _! E+ }0 n
width:800px; 1 k) p( L$ i8 S0 Q- v
padding:0; . x2 i5 ?- Y; a% k6 K! o
border:1px solid #333;
9 d* d5 u5 `$ X& W }
k4 r* H" {$ q# Z7 r#pic img{
3 a: C" c; W: j6 `9 E+ o5 ? max-width:780px;
# ~7 u- T! X9 L2 K5 l6 ?7 Hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 x3 s" I+ k1 pborder:1px dashed #000; 8 r& p. t: W; {
} ' Y6 c4 n6 h- ~0 h, p
--> 1 o A. q5 k" {0 x0 p! k# u+ t
</style>
! j- c& l6 r( A4 i S3 @7 o</head> - _; O9 s8 v1 p: ?# r* {# V$ Z
<body>
7 ^: w4 }1 ^/ Q4 a N<div id="pic"> , X* J' k# G9 V {# \1 u+ o& s- }
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 a; ^7 g* v! u. T [</div> ) ]3 @- j0 J5 X
</body>
6 v. u7 l) Q: R) w( }+ ^. x5 e/ M) W</html> |
|
发表于 2007-12-8 14:55
| 