|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 D: K* W0 w. N关键在于：max-width:780px;以及下面那行。7 j# D) H4 Z! b' ]+ I) J9 l, h
固定像素适应:
$ I9 c. n" d! ]/ i: F# F. ~, v2 E" [! G; `0 [3 O
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> 以下是引用片段：8 A( O* [$ z) t% ?/ F5 |, A4 W6 M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 |; Z$ F9 \! E5 ?4 z2 y: I<html xmlns="http://www.w3.org/1999/xhtml";>
* D% ]6 O( H# o! j. I- q<head> - d |' B1 N/ w) j: M# X
<meta http-equiv="Content-Type" c /> / T0 p) \3 I* S2 V3 H! P8 R$ D
<title>css2.0 VS ie</title>
' |7 F' T1 ?/ A& @# h5 f<style type="text/css">
# _9 A) n+ N V0 J/ L2 R3 c<!--
' s" t. S4 o" U8 F; S0 ~4 P I) }: o( nbody { , N$ ?+ J. S- W$ c& P! J
font-size: 12px; 4 g1 }) p2 `; D! @7 q( v
text-align: center;
# a r7 O* z t% Bmargin: 0px;
. B- A x m; u3 B' ?padding: 0px;
6 \2 M+ ^; N0 k; H, B2 ^}
, k0 b. y8 j3 s+ N#pic{
. Z9 C- d& u# N/ e: l$ M+ _0 a margin:0 auto;
+ D5 z' X3 X9 |& Z& T+ O7 H8 o2 u width:800px;
2 `7 ?0 P5 t. r P padding:0; / B9 H0 }2 k+ {+ a0 G. d
border:1px solid #333; & q4 T* o& d4 X& l. z7 M- c
}
# a; D/ f7 E+ i4 P& {: X# q3 a#pic img{ - D: e0 l- X2 G/ P) M
max-width:780px; 2 E: k! n, h" [+ P: C; G7 c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 K* w6 k" H* s3 E' y. @border:1px dashed #000;
& R# Z: q- G E E; p}
5 q( q# l- i8 p4 D-->
9 j+ k0 R- j8 [' P1 Z# B, }0 q</style>
6 s( H- r7 |. y4 B1 S</head> 2 S& I4 t7 H! H) \- k$ T+ M7 V6 c* _
<body> % u8 W2 c0 z9 t* W9 Q. Q
<div id="pic"> & J) K! A7 h5 O3 b. j' h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - |3 g, |6 W, J6 s* |+ K$ ^
</div> # C! A, f/ s h2 y9 t2 H( C
</body>
; g) T- Q3 _0 k" y</html>
0 J' y% R+ {& [! G% t# `
' c: |, i" ?" |1 y" [' q5 R$ u百分比适应:
* V1 c+ l8 p( \2 d/ |% N以下是引用片段：7 E5 U) C; c' Q1 ?0 }% Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 I0 K5 } E9 ^7 C# p/ ^5 m4 \3 q<html xmlns="http://www.w3.org/1999/xhtml";> & h1 Q3 _4 c t/ f* A; a9 K
<head> ' U, v# c& N; f" J; h1 n6 y
<meta http-equiv="Content-Type" c />
8 F% D& w9 z% T9 r6 B a8 F<title>css2.0 VS ie</title>
1 R* F2 G' W" A* T<style type="text/css"> & V7 f$ r ^: k% f1 m2 G
<!--
/ L& p: K! z4 l6 D4 l0 Hbody {
, D X- z" I, m5 B0 ~font-size: 12px;
, N, V ^( S# e9 j! [5 \text-align: center; ( A, t5 F$ C" E% v
margin: 0px; 6 v0 n6 ^4 x1 d3 t
padding: 0px;
1 \% [9 [( i @4 {% V1 G# B, M}
$ I6 S8 t' j8 w) R) I- L#pic{
! O, y' t4 n5 j3 x/ O4 Y5 W margin:0 auto; $ t$ d( f, {3 E" L
width:800px; ! a2 C6 C- `( N
padding:0;
- E3 b) d3 p$ b ^) w; x border:1px solid #333; ; h w& `9 ]( K: _3 [2 g& U
}
, F1 J' C$ Y, a! Y% [#pic img{
' b# k( ^+ ]) a0 G9 W" B max-width:780px; " R4 e5 R4 A% |+ [4 D* Y8 x4 X7 A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) X1 R X% C& v# Sborder:1px dashed #000;
B0 [6 j) u" Q q; ]7 ?! y6 O _. r1 y} `/ I0 K- r X" d2 F
--> 8 y, Q! _ I) c6 T# Y! c1 t
</style> : j$ Z' l$ M! z) z
</head> - ~' `8 e% H$ ~8 u& G# c c- Q, ]
<body>
( x4 a% i. _: U3 B" v0 c<div id="pic"> ' v$ g' S0 d5 I+ R0 r, l! d) I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ v6 x+ j" t3 k% G. L3 J. v" n
</div> c- S0 C' D5 a4 ?, K& E
</body>
% V T" u. X* F' s</html> |
|
发表于 2007-12-8 14:55
| 