|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14435
- 金币
- 2503
- 威望
- 1647
- 贡献
- 1451
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; ?# u1 y1 h$ ~: \$ `' n& i关键在于：max-width:780px;以及下面那行。
! g# V" r' l2 d$ Y$ q R固定像素适应:
9 T) X9 F% H$ g+ j* z8 s
+ K+ ]) ^, t! Qdotted; 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> 以下是引用片段：/ m( \' s/ m7 T) J9 A( E! _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, o. `" g2 h' u' C<html xmlns="http://www.w3.org/1999/xhtml";> : H: z: S; W; G
<head> N \( J$ P8 c; M) Q/ O j
<meta http-equiv="Content-Type" c />
0 E4 M- W: A6 G5 l& ~9 D# c% g<title>css2.0 VS ie</title>
8 R7 L4 k6 `, N+ N% y( U& |<style type="text/css">
: p$ r9 g8 H* R/ V. Z<!-- E1 _* R0 s! V+ I* G* q; V
body { # v; x9 j0 z$ u, P
font-size: 12px; ' ~9 k- B4 q0 Y0 n i. y* i0 f. R
text-align: center;
6 m. s6 L1 N' f- }4 Gmargin: 0px; ! m& b" N" g7 b ~
padding: 0px; / v9 Q# k2 b: L& d- h
} 2 J# W5 c. l* W9 Z' l5 t
#pic{ 5 ]+ B4 N4 R, j! e
margin:0 auto;
# K5 |% U U! z$ |# F/ m width:800px; . @0 Q, K/ m9 x ^2 n$ r
padding:0;
3 h# A9 X7 }) a( x! ~ border:1px solid #333; 9 ~/ M! p- S" v- b3 _! k+ b- m
}
4 F* Q0 x8 h" `#pic img{
! c' t. [3 ?6 f. ] max-width:780px; 5 h! [. Y, i- ~ }. t* O
width:expression(document.body.clientWidth > 780? "780px": "auto" );
y1 Z) |; C9 Q1 Gborder:1px dashed #000; , q1 x: z" @2 I& m
} & ~7 K5 Z6 O: k# p' j" e4 X% p
-->
1 [& b2 {5 D x* O$ d8 m</style>
! m- E! k1 }3 u4 e</head>
) p6 ?' w& b7 m x<body> 3 o0 o" q3 {0 d9 c/ W0 g4 u, B( @
<div id="pic">
; ]5 B3 i5 d- J/ {- k2 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( V8 R- D4 `8 k6 q! i
</div> 3 Z) `& e2 h1 i6 I% Z |" s, `" P
</body>
/ n6 z$ i* T$ d f) e! C</html>
p" I4 x% M( O) Y' ]' F, T
: @8 ]: k% K( Y4 u0 s5 G/ b/ |百分比适应:
x( d! F$ H: i; h以下是引用片段：- M% A; M8 n4 P6 M- x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . D$ O& h, R# S6 `1 _
<html xmlns="http://www.w3.org/1999/xhtml";> 0 W. f r1 C7 L: z% j
<head>
3 c) v4 L5 f/ _. u5 e9 `# G* O<meta http-equiv="Content-Type" c />
3 n3 A( ]5 N; [# N. k' @6 h4 ?<title>css2.0 VS ie</title>
$ O/ i! w9 b1 D<style type="text/css">
+ P8 X2 t5 K! S<!--
2 w d v$ L8 p% Dbody {
1 [; |& h. p) }2 W* a' ~font-size: 12px; 2 S$ K5 l- m5 @! n: h) P
text-align: center; / Y+ `% i5 Q4 j8 C) V
margin: 0px; , i7 O; p7 I5 W1 g
padding: 0px;
! u& a, d$ r/ i} ?" D6 \- y0 L- x
#pic{
2 }* F5 D5 k. w) Q7 M margin:0 auto;
1 G+ g" @3 @1 H& ]# f( u width:800px; 9 I: y+ O3 T9 `% R
padding:0;
+ m0 N( C9 C8 q- A+ v border:1px solid #333;
# ~( q) s. O( e- d3 J } 6 w7 f7 h0 N: O; X
#pic img{
: G P; H# ]$ g' I2 A( } max-width:780px;
$ |9 n# K* E+ B0 {3 A9 ]2 H; R# @width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& t( W0 n" S) s; w" F0 Y, Wborder:1px dashed #000;
7 c0 F0 Y- r5 @) b2 b. Y( j} 9 ^; C' q7 v' R
-->
# a& |' Z) n8 C# C6 E% r3 g6 x</style> - t( D3 [% \- N
</head>
3 J! E: O7 \# w, ^4 s6 m. u: F<body>
; U) ]' b# E( a. h/ t5 f<div id="pic"> # E) A+ \# o2 H# C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 P- o5 |+ m \3 W' q* ?</div>
$ p' l- x$ G1 ?. t2 k</body>
# g" G2 ^, y, d2 |</html> |
|
发表于 2007-12-8 14:55
| 