|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14387
- 金币
- 2479
- 威望
- 1647
- 贡献
- 1427
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- ?) a3 k# e! g2 [% ] z6 N3 J关键在于：max-width:780px;以及下面那行。
' j3 r; t' E- t& d固定像素适应:
1 D: V" [/ R& [1 }% o& `8 Q) Q% n6 s' {+ }2 I7 E# d
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> 以下是引用片段：
+ W6 i5 X- J: k' t& ?+ w. J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 E$ p" m' g: B6 Z$ u* s<html xmlns="http://www.w3.org/1999/xhtml";>
7 V. b. z5 g F. B$ h- s/ l<head>
: y- y, H7 _2 X" l$ d<meta http-equiv="Content-Type" c /> 4 i% h3 I- o6 B. ~- S: m3 x/ j
<title>css2.0 VS ie</title> 9 K; ^! ?, H2 {, V! T- ^! o; j
<style type="text/css"> 6 ~% k! | B5 x. c
<!--
e# }. |" ?8 p9 s3 Bbody { ( o9 ]# y1 _5 a9 \" S. W
font-size: 12px;
& K$ g- p+ y1 L# k" B7 ftext-align: center;
8 N' K- h2 y7 A" `+ D! omargin: 0px;
! I1 r7 {$ J; H# _- l, lpadding: 0px; : Q! r0 Y3 T7 _/ P* O# q; W# T
}
* d6 y: i( D9 C# N$ M/ K#pic{
: W% M" A- c7 T; ~' R8 v$ [5 L margin:0 auto;
5 H1 r9 o" t! M width:800px; ( d+ [: y. R! X) k6 S7 U. F4 f, \) n
padding:0; 1 ~ ?) p$ w; ]% v
border:1px solid #333; 0 x1 h: A b; f) `- s! L/ H. j7 u- [
} 8 b, X! N% ]7 p$ z. G9 p: w
#pic img{
9 o, A- _8 e6 ]+ U" U* ~ { max-width:780px; : A! I+ U. Q6 n+ R# B6 g8 b
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 w: B) \2 D3 I- p- j
border:1px dashed #000; 8 f" J) J& y0 b ^
}
9 l A( ?1 O, y( }* H-->
7 [$ w. p/ A. f X% U3 [1 P+ b& N</style>
* P2 ~3 A0 c2 O. b+ u- ~, y+ w0 {8 b</head>
2 G! {$ N9 B. K% C8 C<body>
& P" G/ ]! Q' ?' ~! c8 y( @<div id="pic">
/ t3 H' `# F: T# r& v, N. D$ G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / t6 F7 Q' _1 H$ B; S& F
</div> & b/ m5 U* Z7 M2 t) K" z8 {, |# I5 D
</body>
9 z% X* v g* x! \</html>
# q4 I. g" ^/ Y; q, k+ J( d9 H, P$ K+ _4 ~; t; e
百分比适应:( I/ |, o8 ^% R% q4 [2 Z8 C8 t; j
以下是引用片段：3 c% t6 k: q( i6 t2 A6 \5 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - S5 Q! }" q4 P* n1 C1 [3 d
<html xmlns="http://www.w3.org/1999/xhtml";> % y1 I& r& d* S" l3 @* V, q4 z. I
<head> - i; \- C, h. q
<meta http-equiv="Content-Type" c />
% [3 L. y. B( ~! F& V8 w9 X<title>css2.0 VS ie</title>
1 v; s3 u( {5 A' ?/ F8 H0 v: P) ]<style type="text/css"> + ~$ }, i# D z9 [0 n8 h
<!--
; W+ Z' g% Y' n/ @/ ibody {
; g$ |# ^+ r h) jfont-size: 12px;
7 t8 I3 y p: l" {( G5 ~ s% Ytext-align: center; ' [5 q/ k* Y3 j* \; X) i
margin: 0px; 0 U3 b: `1 I4 j* m5 Q
padding: 0px; . ]3 j6 E; K% m, y
} / ?* v8 i9 i7 G3 k5 b9 p: c
#pic{ ' o, f/ Q- P2 o* C4 X
margin:0 auto; : A$ T* j: n& ^+ t* C) t
width:800px;
0 Y4 q4 Y2 V3 t* e3 r padding:0;
# R- S4 e* K+ U- `8 Y border:1px solid #333; 3 v6 `8 M' n' z' s1 x* X: I: j& @& z
}
1 \1 l/ h$ b, ~, W#pic img{ / k) [$ ^+ u& `8 j8 q
max-width:780px; 8 l9 x+ J3 p7 [
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 g! _# c/ j6 o) S2 I. Q/ f1 R( {4 Nborder:1px dashed #000;
0 w4 p/ w6 g3 @) K} + G; ~/ L; [3 P3 ]' n4 y v+ b
-->
( N& J5 s: H* ]& d( X# a- [</style>
- z4 V' h/ [3 U6 G4 v</head>
7 I) B& V9 ]( l4 k# H; f v<body>
& N7 {1 |3 V6 }<div id="pic">
6 g, M, U0 Q' T7 a. f" X5 _<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ w9 V7 `& ]% N</div>
6 V% K# F& _% w! c! T% m, H; t Z</body> 7 F& k8 |& x4 u: H$ H& u
</html> |
|
发表于 2007-12-8 14:55
| 