|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, j. l5 d, w/ r2 ?! ~" u2 A/ ~
关键在于：max-width:780px;以及下面那行。
0 ]6 O2 s T! U$ t: ?( P5 K' Z固定像素适应:
2 G# U$ c$ y' ?5 ^' W* Z
9 U% @, A! }) {, @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> 以下是引用片段：
( _9 j# G0 e+ o1 U% Z0 A9 B% c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 D* W b& \2 o3 q4 S4 {0 k1 d
<html xmlns="http://www.w3.org/1999/xhtml";> * ]9 B7 d: G' a8 O, _
<head> 1 ]8 D% |1 s' u" c: }# h1 b/ Y ~
<meta http-equiv="Content-Type" c /> 3 o$ @: z# Y" T$ f+ r) ]: J" s
<title>css2.0 VS ie</title> 2 c7 j. F; @5 r0 ?
<style type="text/css">
?5 w) {( N( F; ? E$ y<!-- 9 S; L6 t! s; T% V! S% H+ z
body {
) ]: g9 t8 F# T, ofont-size: 12px;
2 b6 E5 z v' q" E2 v3 A& z% k" ztext-align: center;
7 M7 X9 Q i" Vmargin: 0px; ' h4 t* q. E8 J0 \/ x
padding: 0px; # K2 c& d4 R! u
} 4 W$ P7 H% e. }; C
#pic{ ! m* G# G0 l4 ^. g% I: B4 k5 {
margin:0 auto; % n" ~4 j7 @" j
width:800px;
: l' w2 j) N! f; }8 }8 y0 P, ?; m padding:0; . o1 p( R5 c- H. ]
border:1px solid #333; ( y( u8 b4 B- ^9 v( u& m+ i
}
~" x/ ?* y/ d& y#pic img{
) `/ }2 z" g2 K5 H max-width:780px;
1 k2 P; V2 c5 I- j' pwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
# e6 ?* a/ W2 S: t; Y9 @/ iborder:1px dashed #000; / V* m1 R3 c) y' s. ]2 w
} + {" t5 B% Z6 x# E O% M
--> 9 ^1 a( u7 [* L- I" k1 Z
</style>
' w, j8 J, K: o1 d/ F4 E) c</head>
8 X$ C- _- \( Z, K8 {3 h( }<body> # w0 K! r# q2 Q) \; Y7 w8 @
<div id="pic"> K3 F' C2 I( G" O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" a" L- w" W2 T1 e+ f5 v</div> F7 {- P+ _7 Y6 h& V" p. ]" S
</body>
6 |9 N" \, d2 U2 t6 y' W</html> + {7 e; o- J7 \( n
6 W) [# E1 E/ t百分比适应:
3 [% o* r' F9 D. Z) [+ g以下是引用片段：
5 k9 c' u2 a& y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . M" S+ ~# R0 {( h+ ]8 n
<html xmlns="http://www.w3.org/1999/xhtml";>
+ Z' J, A* S7 T; s9 [( c<head>
) U- ?, T8 b/ q7 Y- U+ G. q<meta http-equiv="Content-Type" c />
/ j& J8 c0 {+ a" g& k6 f<title>css2.0 VS ie</title>
9 T6 O7 r5 F" l- o<style type="text/css"> 5 e! ^( o9 r* N! t& t
<!--
+ h- S$ }$ [8 \& f1 p3 V0 m3 Zbody { + `) c- [. I1 ^9 o* ]) G6 A, H
font-size: 12px;
1 S E2 K! A- f) G& ztext-align: center;
' [! Y" b& h% a2 [ ymargin: 0px;
- Z. |5 q! t6 ~& Bpadding: 0px; % k/ O+ V9 S: G
} ; k, T' _ ^: E* d
#pic{ 1 r+ I( b" \% A6 z; c
margin:0 auto; 2 h2 e- ?+ M8 ]2 f6 \. p* p$ Z
width:800px; * U, f; [( O2 ~2 |) F) t# Y! }0 v6 ~
padding:0; / w; W* c, T' Z$ F% n& X8 F$ I
border:1px solid #333; ) X9 r; W0 |% x X8 K! S
}
1 `9 h1 t6 n' @6 C#pic img{
3 ^' e* d; o# I! q T9 C max-width:780px; 3 G. W4 x) {% P- @/ Y, R
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); F+ N( ^5 F6 O) L( H" `% Z
border:1px dashed #000; ! ^7 M# e6 b. g/ f6 r, ?
} 0 F. `- A% H8 v5 Y) [
-->
: D$ |$ V6 f8 d</style>
: w/ _ ~& _: O- n+ L7 J</head>
( Y% t& a$ f$ s6 U# A<body> ' e4 b3 H& `6 Y/ c
<div id="pic"> 4 }; G; V. P4 x5 i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 X5 b; T3 ~7 ` B& C</div>
4 c; E6 A, |$ o* ^/ Y% U5 @</body> . j5 j( h: C4 W# E1 C
</html> |
|
发表于 2007-12-8 14:55
| 