|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14391
- 金币
- 2481
- 威望
- 1647
- 贡献
- 1429
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- {4 ]' D5 Q. @/ z
关键在于：max-width:780px;以及下面那行。
* A5 r, E7 O, o, _# `0 B5 T7 g固定像素适应:
& n% `! b* S" z+ E( \- W: r3 B+ r+ `$ J- c, x/ K
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 U6 r8 I5 B0 }, o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 A# s# R# n4 B3 n<html xmlns="http://www.w3.org/1999/xhtml";> 0 x, w2 A" W3 Y, E6 _! I% y
<head>
- q; m. n/ S& s+ C2 v4 ]. D5 G6 X<meta http-equiv="Content-Type" c /> ]% j& o P" ?6 V5 V/ e* O% |
<title>css2.0 VS ie</title> % W; _1 u( v% P" e* }& B: h/ G1 i
<style type="text/css"> 7 _0 T+ }* i0 w
<!-- " e3 {* r7 }/ v( ]& Z
body { - z% t2 ~, r, V$ L2 G% c: M" I4 C
font-size: 12px; 1 k% h1 `9 d' y
text-align: center; , v; G7 l& R( }
margin: 0px;
& M& j9 S9 a% r4 D. i. r- Bpadding: 0px; " X( G$ \$ [* R9 `4 ], y* S0 n; U
} # K1 B+ v7 c5 B, K% c) V9 R* j
#pic{ # N! h# P1 r$ ^# X; Y5 M
margin:0 auto; 5 r7 b; b0 n' f9 ^# \3 ~
width:800px;
1 t9 U) M5 v) c3 o/ O; e padding:0; & Z3 l: r- F% V: s" ?! @ O* F) q
border:1px solid #333;
4 |$ y# k& a; G8 x }
+ M8 |& P5 g/ u- @#pic img{
- d# H( d$ H3 [2 s max-width:780px; ' R6 M9 O" `2 R, y' v* l
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& B# e, y2 \. B8 S# A; p5 R0 oborder:1px dashed #000;
# [0 k2 S! d5 V( r$ d0 a6 _}
* R1 @( x) B; e( r) i, h; U-->
- Q4 o5 c4 ~4 Y# `0 u</style> * Y& t7 \ R5 M. x! c
</head>
* \0 m1 i6 d. [6 |<body> 3 y0 B; W( t( G3 x: Q6 w
<div id="pic">
2 H# A6 l2 B' j; `" N7 g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 }) B5 Q' g7 r% ]
</div> 5 j; Z0 H( m7 ]: _: J
</body>
5 @' t1 P4 \* W( w* B9 j/ M</html> ) v% h7 c; E6 ~8 |- P' Z
" ?) W. [* ?; ~, l" \百分比适应:6 Q1 q; f0 o1 Y, K g, E& i
以下是引用片段：
% ]$ z8 P+ Q. O1 g8 K. g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* U6 r* d4 L$ a* @4 r0 s7 n<html xmlns="http://www.w3.org/1999/xhtml";>
% n9 \) D4 w6 R' z( a7 Y0 Y<head>
$ d5 Q# t0 d' v" l7 W5 I# E, I<meta http-equiv="Content-Type" c />
# V' `. B* g) v, e+ l<title>css2.0 VS ie</title>
: m4 {3 Y% O/ i( ^0 t0 h7 d- G<style type="text/css"> & C! f4 C/ C5 x
<!-- ' J- ]/ ]& }$ C+ G% T
body { % T9 i$ E' D5 r0 ^
font-size: 12px; 7 A: q# L- q: v6 W* w% y
text-align: center; % A0 v' O/ }" |+ Q+ G
margin: 0px;
+ V% O! w. Z8 {# Wpadding: 0px; * i% J$ a4 \' _
}
+ Y, m2 C5 b. H5 ~: a#pic{ & z7 V# ~% `3 n. G1 T" p1 l
margin:0 auto;
# A% C3 H% k6 r6 {1 g. T width:800px;
% M& ~* e" v. _' W: @ padding:0;
* u/ o' m' M ]4 j border:1px solid #333; * `; Y. H% K0 s( V4 P3 X7 y
} 2 l6 Z0 C* |3 _* }
#pic img{ ( C" Y5 t. `6 A9 J3 R
max-width:780px; + g9 c: F$ s N4 p; o$ ?( o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 x# x8 S1 h& ~9 K W9 J q8 Q
border:1px dashed #000;
# e" Z: j9 w0 e) c1 d}
/ \' S3 J* w7 r4 Y' m--> $ N; [6 r& E0 g3 O& B' p
</style>
# l+ Z) D. G! u1 Z& r</head>
0 c: J7 Z: t8 `4 P* m+ Y8 q, c<body>
! y/ ~; P' S. o3 I& j' [2 E- H3 V3 a<div id="pic">
$ @' L2 } q( k3 Q2 n, h# j* B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 k- P# |8 j a/ D# I( ]
</div>
/ `: ~ |& e3 ~4 I' g3 M! s</body>
% Y3 P5 d1 \4 E: M' ?' Z1 X/ W</html> |
|
发表于 2007-12-8 14:55
| 