|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: F' N! }9 A% u! k关键在于：max-width:780px;以及下面那行。
) h1 J0 s7 b- n- D" s3 c# O固定像素适应:. D5 m5 G5 M- ^5 H# t& Q; G" K& G4 d% P
' t. k. w' E# J7 S$ w. T# t1 f( v
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> 以下是引用片段：
4 Y7 B& y) `8 N; r& K0 Y# `. v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' V+ X' Y" s' g' C) {9 ]
<html xmlns="http://www.w3.org/1999/xhtml";> , t8 B2 m4 e( J8 e
<head> ! M C; P& }3 P" a% W) g3 x% ^
<meta http-equiv="Content-Type" c />
+ x, s$ @+ @. f+ W8 ?) U7 N<title>css2.0 VS ie</title> 1 c& i5 T1 q5 s9 n1 Y8 s5 _
<style type="text/css">
, {0 o* |# d A7 K0 L" [: T; ^<!--
" t/ D4 {$ k8 G& B( T- ?: v6 J* `body { 5 t* \" r# e1 w' T% j
font-size: 12px; N! \$ s: M% u0 J4 i
text-align: center;
# l3 n! f' ]+ b/ L4 D; c+ K) |& n' G: amargin: 0px; 0 {# A! W+ ~& B& m0 y
padding: 0px;
) y, m8 |0 @0 @5 [7 F6 U2 T}
- X! m u s2 i1 H2 s H' I/ w#pic{ 5 ]- f2 G- s* G+ l
margin:0 auto;
, k Y P P5 ~$ b1 G9 {* z3 c, `- P width:800px; - _6 ?( t$ {) }/ D8 y" g
padding:0;
! _( T8 p! w9 U. K2 G, x2 `( p1 y border:1px solid #333; 6 m, f L1 W/ D+ u- x- B8 V
} U" d A7 N! o1 b. H+ A" D
#pic img{ 5 M/ |8 u8 n* X! ~) v: {5 t6 k
max-width:780px;
% @1 ^8 k s: }- T; X" r$ x k9 }. Qwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
- a H% O; V0 f, I5 c) ?9 k' bborder:1px dashed #000;
z9 `# r! f2 s( h* r} 1 \0 w- n2 ?$ M* X, H
--> 4 T6 w. n. ]0 m! k0 }' }) u( r6 a
</style> 4 x+ ?+ ]* C6 z1 Z2 G5 L- W
</head> + C& Y: T5 Z; [
<body> 7 @1 A7 r @2 V& @& \ y
<div id="pic"> 3 p5 a/ i% C/ Y& h) A( r
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* O1 `8 `$ W+ u3 E, C& I8 O9 l' U</div>
" X) `# o6 [( _ m</body> ( I" L6 v0 w# \* T+ [
</html>
2 s7 \7 k2 E6 G
( O i. V9 S/ y百分比适应:
1 A8 M& I8 P, m |# j以下是引用片段：( ]5 H: s, |" ?" Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 J, V# S9 X: ?
<html xmlns="http://www.w3.org/1999/xhtml";>
% t+ N1 P' q) W$ d! ^* M5 G( h<head> / k+ i( t+ j7 s* `4 Z
<meta http-equiv="Content-Type" c /> ( `. l* s3 [4 w$ B+ Z( W) } P3 U
<title>css2.0 VS ie</title>
- S' Y) r+ T& b<style type="text/css"> 1 [4 I/ L A6 R/ E2 S% ~4 p
<!-- 1 c# A8 Y0 I& ?
body { 6 B. v" f7 l0 z$ r
font-size: 12px; ( }) @3 Q- D3 C9 A$ Z
text-align: center; / m3 P2 L7 f- y6 R3 `
margin: 0px; 8 i5 s! }' B' q
padding: 0px;
( [: Y; |8 P) B8 M* J/ Q+ K9 I}
- r2 e' f$ Q& G#pic{ 0 u6 T% s, l. ]$ l! a
margin:0 auto; . A$ z, H- l& I7 q/ n4 i
width:800px; 8 f8 F8 E7 z0 n% P( |! R
padding:0; 7 J$ N+ X, ]9 `* ]+ I- ^* Z
border:1px solid #333;
3 T% D$ }* p, g. r. n* E } 9 ^( J+ N4 q. S1 m" u5 e2 O
#pic img{ / [; t, X/ I A4 p5 K8 x
max-width:780px;
3 ]3 S, \/ h4 @- z9 K3 ]width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% S% V% e+ E9 |border:1px dashed #000;
S# C" W! D4 L$ [& k, ~9 E} 7 p& S# |4 P2 ^% S) u- M
-->
+ j# F4 G3 i5 i4 s</style>
7 v+ M; C8 ~# }* p: j/ N1 z</head>
/ Z8 ^" D$ L6 P) \5 u2 B% S3 J<body> 5 l. e5 a: C2 W4 l/ P; V$ E0 V+ z
<div id="pic"> 2 n) U: J u% S2 Q/ T7 x4 Z3 \4 C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ [" q, A" W1 y4 {% Q' I* [# d</div>
2 Z6 ^5 F" Y* O A</body> : @" \ J/ r P6 C# d
</html> |
|
发表于 2007-12-8 14:55
| 