|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' Z, X( s; S0 t* r关键在于：max-width:780px;以及下面那行。
$ ~8 s0 n/ [! L' A0 h4 G' }固定像素适应:
6 v6 W9 S+ {' u! H1 a `
0 l( T1 `1 i, |7 k8 qdotted; 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> 以下是引用片段：
. [+ i z1 [; [, ~- D: m! w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + z/ k, _7 k. t9 K9 E% a) A3 q
<html xmlns="http://www.w3.org/1999/xhtml";>
D. `# n- z: u. s6 e8 ? n<head>
; l9 R, W, a; k4 U3 z<meta http-equiv="Content-Type" c />
9 Q. r" v. Y& m<title>css2.0 VS ie</title>
# b0 I9 @' Y& I% ?<style type="text/css"> ! a3 S, r+ ]$ a4 u. X9 N' Z
<!-- ) s" b* ?- j. p" `! K7 c! L/ V
body { 5 Z7 K- a% H$ I; ^: R
font-size: 12px; 4 f9 v2 h+ L/ i1 x7 }* `* R( T
text-align: center;
+ y1 Q; O; H! P. B" y+ m+ Omargin: 0px; % i% Z" [0 k& q% c+ p9 M
padding: 0px;
# i% ?$ ~$ X, n8 d) F}
6 U5 ]: h, s, f9 J- B#pic{ 2 D1 }8 d0 T/ Q- B a q+ j, C6 F+ N
margin:0 auto;
4 Y2 p, v; H0 b9 S- [. C/ }! O, m width:800px;
2 O0 g; O- J& h: I3 Q# E padding:0;
& h, g" u( t x* H, S& v border:1px solid #333; ; ?) `0 C9 k; h: i5 w2 e8 P
}
: I7 t" U; G8 g#pic img{
% c. v; k6 e; m5 x4 W, d( e6 s$ _ max-width:780px; 9 A% n8 x+ v+ X
width:expression(document.body.clientWidth > 780? "780px": "auto" ); & p3 H3 s n9 y6 n# N& O: u! A
border:1px dashed #000;
4 S9 S+ K; D6 M; h" @. ~} + X) O( C2 f: S8 W
-->
1 B2 H( J2 P! D3 @</style>
$ g; U% P* E# d2 {! {5 C6 O& n</head> 6 _* a2 j5 T8 @. h1 l9 z8 M
<body>
/ s, G5 y7 J6 s6 Z( \* Y<div id="pic"> " I1 H+ @' D0 e6 [" s9 A$ [
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : a. \' o$ w% {& c" f- l; c% U
</div>
7 V2 n( w5 g$ i1 s% [. _% S</body> 3 A( D% l" x: ]
</html>
4 I) p) j! C" f4 e' B0 i2 S7 w5 F7 }9 U) r1 s3 { U
百分比适应:* ^& W+ M3 l, d& R
以下是引用片段：
+ f* v- I9 L( C9 D7 k. d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" |1 ~2 `8 g# T! |<html xmlns="http://www.w3.org/1999/xhtml";> & w' i, O+ F R+ s. G
<head>
' @: a/ L4 A5 P3 F& B: b9 y* t<meta http-equiv="Content-Type" c />
9 k) }' A0 P4 Z5 `( ^<title>css2.0 VS ie</title>
! `& I2 H2 q, L* I& V+ i<style type="text/css"> ' [8 Q( ~4 }! M; c: w
<!--
; U( q' _/ |) K/ ^/ L9 Ybody {
) \6 H6 Q' F: g2 @3 Hfont-size: 12px;
5 N7 K8 P& x2 C' }9 U3 ktext-align: center;
; c4 n% o, a' D Xmargin: 0px; ( h3 h3 s# c$ g' @' a2 m
padding: 0px; - U8 L* w5 N, ~& T9 H7 Y( F1 N8 d
} 6 w6 Q5 ~, W' b2 U) P6 F
#pic{
+ O z# T2 j9 z8 F8 P, T' q/ L margin:0 auto; + k" ]9 s+ p Z8 |* g# ~& H7 `% g
width:800px; , s" U9 U8 Z# X& @
padding:0; % i) ]/ A6 y0 F; V$ d5 ?# L* g# @( K
border:1px solid #333; ! _. _7 B* E& N: p1 j- Q
} ) P4 E* ^4 G1 d. L
#pic img{ 9 l3 _3 C- n; X# x
max-width:780px; 2 D* } m" m" Y1 P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& y% N* w! U3 J5 qborder:1px dashed #000;
% a* S" K, M( u+ R}
) z/ ~- J9 o* q0 F3 ~4 ] n* t-->
: Y: s. Q& y g# ~( Q: P/ o</style>
4 b0 f- B- S& Z7 M. f+ O3 k( @</head> & ~ Q \# B6 a+ P9 @
<body> / W% l/ T7 W( k1 D
<div id="pic">
- j1 f, ^! R+ E- u i# n; L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , h8 h; x' o4 ?; b
</div> ; O6 g' a8 P1 k( ~# ~ B
</body>
% p9 x0 J f5 V. m& r</html> |
|
发表于 2007-12-8 14:55
| 