|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14339
- 金币
- 2455
- 威望
- 1647
- 贡献
- 1403
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" H0 W* o" F8 o5 }7 v8 @. @- [- J( _! @
关键在于：max-width:780px;以及下面那行。$ v3 W( c z, \) s
固定像素适应:
% s0 F4 b# U5 U( Z# Q
4 m/ s" O" ~( I' 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> 以下是引用片段：% B2 c" K" ?' c- H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( |" i$ K% ~- e% F$ ?6 W<html xmlns="http://www.w3.org/1999/xhtml";> ( ~4 S) {6 [* ?) y
<head> % F& h) D( d1 `: Z
<meta http-equiv="Content-Type" c />
8 P' e6 @" \) _$ x. }" O<title>css2.0 VS ie</title> $ O5 |; E8 W2 f# [( r! t& H
<style type="text/css">
( z$ }+ @& M& E; Y<!--
. F" G! M2 S* g% k+ F7 j( O/ dbody {
2 n- {* r0 P4 U% Z% Cfont-size: 12px;
& B4 L4 P( H5 o0 ctext-align: center; + T) n/ F; v& j
margin: 0px;
) [$ Q# i3 w/ X+ Dpadding: 0px; 0 I+ e) W" o) w, F+ m& y, d6 V
}
. r3 ^0 ~. @. B# G' {& a#pic{
6 F0 D% s' ^, c6 C2 Y2 b margin:0 auto; ' W; o3 E$ U# G* o- L9 G
width:800px;
- i f4 L/ m% a. P! E- v padding:0;
: @4 R, r7 l+ [6 q' c0 t border:1px solid #333; + }6 H, g( V+ l: K t/ B
}
3 j; V5 m2 {, t7 G% i, `#pic img{
: S1 M& J3 f$ p% {$ c( [8 Y max-width:780px;
' f7 K" i \4 C% _, T" c7 w- Kwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
' G9 A2 X8 Z( g8 zborder:1px dashed #000; 9 V* c5 \; O- O" j8 J6 ?- E
}
! A% `/ ]% l- e4 N! `: n--> , i" t& i/ U6 t6 s
</style> / d0 O( p" f. b5 j' ?2 ]2 q
</head> " y/ ^* a$ Q4 f
<body>
h: K$ i- q. ]2 i9 v, S# \6 |( O0 q<div id="pic"> 0 c# G% U( I6 N" N5 I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- l2 C" t( M- B0 S</div>
/ f2 @3 b& w8 X1 j$ a</body>
; t+ t3 d0 M6 z. O: a</html>
e8 l8 p* Y7 P u5 e
* `3 P. z& R+ s2 h7 l# P百分比适应:
8 W/ B, @5 o! k0 N# D以下是引用片段：- L- w8 R0 t* ?& q1 `, O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> k( T4 K! d q/ I1 F; o8 y* I( P: N
<html xmlns="http://www.w3.org/1999/xhtml";>
. ^% n4 `* e& f<head> " q2 {1 }& }) w, Z1 i2 M) L8 L
<meta http-equiv="Content-Type" c />
/ l4 X$ Y) M4 Z2 D1 L7 G- S) h2 B! s<title>css2.0 VS ie</title> |* G; f. B- p: ` v8 d
<style type="text/css">
0 w9 M& N, k; l {8 E; ]/ K<!--
3 a" c0 `' x% p7 q( T8 {; Nbody { # p( @" T3 }7 `$ T: c; U C6 K. V
font-size: 12px;
" J+ ~: h- [$ W" v; R3 A- y/ |text-align: center; 5 K, f% I/ T1 g2 c/ q
margin: 0px;
$ P' U( f8 f# Y$ g7 Ypadding: 0px; ) G% o" u% n% ^8 u/ ?) s& c$ W2 s0 v
}
) `! A( K+ e* i& [7 U6 O9 y#pic{ ( P0 T2 ?. g, s
margin:0 auto;
( U8 T; d- [" |6 T7 {8 z width:800px;
8 U q, ?/ K9 W0 s padding:0; - M" g* A# y% Z* m# v' Y! v$ H
border:1px solid #333; 9 w! q) d% J8 N8 i, U
}
; G) l) O9 m( ~1 H' d/ S. T* a#pic img{
( U. l& e+ c6 T/ I/ N max-width:780px;
& l- R7 M: J. V" h* i1 m- F0 Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / Q( O* i; z* Z
border:1px dashed #000;
6 K4 L* v4 L |$ _3 n6 ]1 |} / Q- t H# P$ H- E' _. e
--> " Z2 d9 l/ \- }& ~& `9 t
</style>
* N, b1 t, C6 L5 y3 J& ]0 X6 E, \</head> 6 D# \ i% H; A1 n; g
<body>
3 E: M- I, `, }. C! j7 c! }8 ^<div id="pic">
- k! I. U, _% v# V! H$ L* a/ c( ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 P9 F' [: [2 f( P, H8 u, z+ x
</div>
) a7 _- q0 g8 u( I" V7 z</body>
0 `; g8 S) U% I; y6 B5 e+ z" t; G</html> |
|
发表于 2007-12-8 14:55
| 