|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14347
- 金币
- 2459
- 威望
- 1647
- 贡献
- 1407
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" Y- E2 S$ F8 Q6 I5 x
关键在于：max-width:780px;以及下面那行。
8 ?+ R# t8 z5 L9 D" _3 U; M固定像素适应:
: J# A! H' [* @) K/ K, c5 G1 @
" K; _+ M2 K1 c% C6 K3 r$ Zdotted; 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> 以下是引用片段：% N2 Q3 Q. i/ ~" h( @" x6 T+ c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* C- S! m/ ]' m& ]( z l" {: o<html xmlns="http://www.w3.org/1999/xhtml";> . K/ k: j/ N" ]! `# P+ Q3 R
<head> - y# `9 I( W( v1 X1 f0 w7 s9 X
<meta http-equiv="Content-Type" c />
8 C8 e' {5 B- ]1 l8 p5 V# E<title>css2.0 VS ie</title>
8 b+ e- Y. i2 Q, \: K4 ~* ]<style type="text/css">
- Q( G1 Y8 p- v$ v* L' Y' \: h; {<!-- ) c5 O( H6 ?) e$ D7 V- `
body {
' N# i% ~+ d6 c* _1 q* m ufont-size: 12px; - X2 Q. n! ~! h$ l" j
text-align: center;
) J- J5 e' O. P3 `* A3 S7 lmargin: 0px;
8 p" y v7 {& K+ |1 y. xpadding: 0px;
I9 T/ k0 [( `}
: i$ [5 X, c) \( @& T, K0 u#pic{
% G( Q; J6 i0 p8 l6 n4 n5 o margin:0 auto;
% f& c3 y' Q7 q' _1 W0 U width:800px; ( F' @4 @, X3 m4 d6 M7 }& M
padding:0; 2 ^% T) d! s) I( N
border:1px solid #333; . n* h8 O( p& v2 n
} B. `; p9 @" I k7 m5 E J
#pic img{ 5 G! E7 R: r5 e r4 D
max-width:780px; / L. G" t8 Z$ y! A
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ `6 m# R* G: ~! W& O$ dborder:1px dashed #000; . S2 d- f7 M; _: z3 _
}
9 m7 t9 l3 l3 ]3 ^; k-->
1 k$ D& q1 ?$ S( r5 ]3 f</style> 4 u7 K. y0 g6 o) |5 o% V1 Q
</head>
7 p* h5 r* S0 Q3 Q<body>
; M6 J+ `$ e$ e<div id="pic">
, [4 ^7 Y5 K( z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
o3 w9 w+ @$ q</div> + G# L" X; g7 p3 }
</body>
) C1 |* G/ ?4 E! x, D/ P- r</html> ! m* `) B K3 N5 t- {
% }5 g3 F0 ]- E0 i
百分比适应: B8 G. t; p. I; O1 h
以下是引用片段：6 o6 C% g, ?% t8 |8 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , @; ? A) U. Q; y, o. c4 U# w
<html xmlns="http://www.w3.org/1999/xhtml";> 3 p+ m/ h, d" v* O
<head> : e$ [+ {& D5 P, R+ D, w) u4 k
<meta http-equiv="Content-Type" c />
- \2 W' ~4 o$ H- L+ b! o, J<title>css2.0 VS ie</title>
7 q4 Y5 F* `5 X: B) }' C<style type="text/css"> / p4 X" p6 |8 h( i
<!--
' Y4 I7 n( m9 O: s _. t' hbody { # v. X& `. T$ V' B
font-size: 12px; 2 j, e0 g2 Y5 v
text-align: center; 1 J, f3 a, y9 R J
margin: 0px; 3 j7 r- Y. J) K$ G$ P* d
padding: 0px;
9 d" \; f5 ~0 u7 V7 R! C}
% T n$ ~' ~; y% y. S# O% u: C#pic{
' x; t; _* e1 C5 H7 J7 K- ` margin:0 auto; : J) G& @1 D" r1 {# c4 I3 i( s
width:800px;
+ A. e, a8 q; t5 l2 t/ P1 ` padding:0; Q. f$ k' \. |8 Z0 [# [# E: `
border:1px solid #333;
0 Z/ Q0 h- I8 x/ L }
) q/ s% T* `2 ^! |# L#pic img{
: x/ |4 X! \: p; L T( |) Y max-width:780px; # J# [# X3 h4 x6 G& E0 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* C' F% U0 g7 Vborder:1px dashed #000; 0 E: Q% f- \7 \% ]6 f% z! V
} # f* E5 ]# g: `2 O ^, a; o* |# b9 c
-->
& ?* F' K- j5 E</style> : l( ]* t8 \' P; Y( a' s# L- ~
</head> j6 o7 R( l6 H, |
<body> 0 e% A u. X! V, O9 m
<div id="pic"> 0 t* F& p; A3 }( w2 k: \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% T0 v4 j' `2 s2 ?! _2 I</div>
$ ]# K+ Z2 b- B6 n7 m: s( K; c</body>
) M, h" b0 q/ x( V$ N. v</html> |
|
发表于 2007-12-8 14:55
| 