|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% | ?3 m, c a0 E0 A关键在于：max-width:780px;以及下面那行。+ I& W' O/ Z* t: x- j! C. h
固定像素适应:7 s1 ?3 b0 W/ ^0 N$ |
5 }' p! r! B# ]6 `9 Sdotted; 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> 以下是引用片段：3 e' m# l# V: n% U G6 {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 K. m! c; w6 K, x4 }3 l; _<html xmlns="http://www.w3.org/1999/xhtml";>
8 }% g- {) `) L5 a<head>
: o- u* u; p# V* l0 N @<meta http-equiv="Content-Type" c /> ; I: g7 ?0 E; C% S) [9 q
<title>css2.0 VS ie</title> 1 L6 N9 ]8 ?9 u9 ~
<style type="text/css"> " K& m$ T( x. d1 s6 ~8 ^
<!--
& ]9 T& {' D t. ~) j2 Wbody { 5 O3 K2 z; p4 M9 v7 h7 o" e
font-size: 12px; ) g- t3 b8 o6 @ }. D
text-align: center; $ r4 b: n! O9 [/ z
margin: 0px; ! c* [$ @. z0 g) \, w
padding: 0px;
! H) G3 _; _$ F) P. D+ h2 m+ T} * t7 ]4 K) R: _8 T. h. Q- L
#pic{
: T, |9 \. D1 c margin:0 auto;
1 @; m& R1 H9 @& M width:800px; 3 K( x+ O" ^1 s
padding:0; % X( `3 H6 v: B# A
border:1px solid #333;
6 Y! T: }8 h0 Z }
4 L$ u) ^7 m6 D#pic img{ $ o+ N( Y% U# I9 Z. x
max-width:780px; , ]5 B) O* k5 a9 A$ U1 b
width:expression(document.body.clientWidth > 780? "780px": "auto" ); " L6 n: p$ i" n
border:1px dashed #000; 2 ^* ?" u# R. P2 J' u
} # s+ K1 _5 }3 X# _$ N
--> . M7 x7 L& h* {9 V; p
</style>
, e# `/ ^' m1 c2 u2 b</head>
' V5 U8 i4 c7 f, g<body>
1 @4 E3 F9 s1 |9 d7 k+ F% M<div id="pic">
& U% s3 P- o! ?- e( I$ ?' @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 g" s! t6 @5 j' J4 X: s</div>
6 r7 A- M" j9 Q1 Y. z</body>
: R" C9 e) {! R, N3 z6 m</html>
) B! ~! L/ v' W, K; e" H) S9 T# Y/ H0 O8 O
百分比适应:6 U% `! d _& Z# R/ N7 y2 ]
以下是引用片段：2 Q% r! E& O0 @& }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. J$ w8 f4 A8 l) X H; b( ~1 l<html xmlns="http://www.w3.org/1999/xhtml";>
7 I: _9 A3 I, U$ Y9 z; K<head> 3 @. Z/ s% Y+ S$ y
<meta http-equiv="Content-Type" c /> & } s2 [" {8 V/ h: X
<title>css2.0 VS ie</title> 6 I) z8 c# F5 ]! `
<style type="text/css">
9 c9 F. V" t6 R4 p( u<!--
& l4 T6 P* M* D4 C* f9 Qbody { 9 Q" D" V: P; ~6 d8 N& s% ]
font-size: 12px; 8 z3 J; B4 B5 l" C$ d4 ?
text-align: center;
# `9 s5 I# M: x7 b, }+ g' zmargin: 0px; ! L, H8 C# {2 V/ {! i
padding: 0px;
, v" } }$ Y+ W1 t% c} # z/ A- A5 _4 C6 k
#pic{
6 V* K$ n' o- _, a: ~2 t) h$ G8 t margin:0 auto; 0 W. w0 j$ K# _( h( k1 L; T: k+ g
width:800px; # u- z& e! O0 V8 p. u% _# |+ u
padding:0; $ O8 _, R4 ?4 j
border:1px solid #333; 1 ?2 r/ S' K; [3 k v& L* ]; ^
}
3 P* Z l8 {7 _2 V/ g8 d#pic img{ , C! D; s! K0 C1 ^
max-width:780px;
& ?2 b! a* J. N( G1 S5 }* Qwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 x! `8 O7 r- e9 r! o" Dborder:1px dashed #000;
" \& M! |8 N" L' F, B' s}
; x, d* L" T, F6 B4 G0 w; a-->
. d, g L) w8 l4 g7 O* R- Y</style>
# Q* R) S7 M' y5 \4 q5 i</head> & t% }9 y5 g) V
<body> 4 W1 T, `! l/ k8 f2 F
<div id="pic">
. [9 r; F! f5 I( m |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 E" _% ?/ h" K3 k</div> + j; ^% B x0 t
</body>
" i3 T7 \9 U, v( o, E6 b5 S/ n% F% T</html> |
|
发表于 2007-12-8 14:55
| 