|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 h; g" X0 i$ w6 t6 c" M* P
关键在于：max-width:780px;以及下面那行。
3 K( i4 z2 f9 x5 J! Z Q ?9 f5 K+ ` b( |固定像素适应:
2 s6 l. i% Q! I' i/ ?- o- D& h' |) m' l( R3 a/ s& T9 R( F
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> 以下是引用片段：, z$ p" ^3 q. k2 f M" E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / e0 a6 m0 m% Z8 o
<html xmlns="http://www.w3.org/1999/xhtml";>
' w2 n9 Z* l8 p! W2 I7 G# `$ s) N<head>
$ x% F, |: B$ w* k<meta http-equiv="Content-Type" c /> $ H- O0 _( l! O( L9 l% m
<title>css2.0 VS ie</title> + `: T. j W1 s- _, ?
<style type="text/css"> + Y& U5 [% n7 S" o- g0 Z$ H8 e
<!-- ) I8 `. q2 K6 A5 Y
body {
; S7 {; ^+ y* ?. y5 E7 V. cfont-size: 12px; ; o4 \3 {7 \& h2 m- {
text-align: center;
) \9 u; B' d- y( N/ v/ p- tmargin: 0px;
8 R$ H2 L6 M7 r3 X/ \padding: 0px; 3 e' C( i+ k! @! ?; |
}
! q; S6 g- h$ U6 s' V#pic{
2 o# [( i6 L0 f$ G% U margin:0 auto;
- f8 X) q$ f$ |* l width:800px; 5 p9 n& o9 Y0 }1 B, y5 I; J
padding:0;
n. B6 D. o9 R5 G border:1px solid #333; ' b& f2 d) E/ N! E3 R2 {
} " M* y) N! z0 \0 ^. a% H
#pic img{ * `9 L' N: Z5 t. v
max-width:780px; ( `% v; b/ l' _- `/ ^/ |! b
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ H q; Q& b0 q; y' w- Y1 ]1 s3 @border:1px dashed #000; $ x" U" s) K# }* K. y5 U/ w) _
} , Z% S1 l7 E. n& g# V
--> & K" j6 a3 i4 R+ n% ~
</style> & j" s' o0 x. ^; R9 X: \
</head> * \) s7 w( Y# |
<body>
$ e% O2 y* H5 i- ^* f, U<div id="pic"> ' H8 N4 s8 K+ b$ i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 q( R% {% \1 Y `9 V# v5 y: R
</div> , a5 S: x% \; c* j' r
</body>
: p) ^% R) k; ]; a</html>
$ _: M E4 t0 E5 _, O, g8 g* X/ O ^9 o" _% D* X
百分比适应:4 P6 |, _' z5 ?2 ^6 S4 `
以下是引用片段：6 e: o" ^1 c3 z9 a6 `6 S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: ^. B6 g5 X/ c* M& I<html xmlns="http://www.w3.org/1999/xhtml";>
. [" F p5 ~* ?& s/ D3 V<head> " N& g6 A- r6 I D6 T) }$ a; I
<meta http-equiv="Content-Type" c /> 8 B) M4 T5 q$ X0 n3 d$ }5 q
<title>css2.0 VS ie</title>
; g+ n. y1 d& K. T( t; {& z# p<style type="text/css">
4 o/ s! h% }& W% E- d<!--
) |1 B. Q4 O# `5 h) h( b6 bbody { ( {, m2 i* { u! {, r3 ^
font-size: 12px;
+ m( o& m% y+ ]; o, etext-align: center; 1 g- X$ q7 A- ~" D3 J
margin: 0px;
) @/ P+ ]. J# x4 v3 n B9 J: T, mpadding: 0px;
; z. i6 e+ j" `, n2 S}
$ N7 `) b8 Y4 i+ b% z! M* H#pic{
% S. [2 _' q( w M+ K5 d: ~ margin:0 auto; / v. E2 A2 G: \0 M
width:800px; & }5 S: G, w0 N0 M- P1 f& f' D
padding:0; - |* c6 l4 C, y
border:1px solid #333;
9 i' B# }7 \4 e7 l } : x1 M) @( h+ o/ q
#pic img{
( T( G8 E/ V3 c. `" C+ H; M max-width:780px; 0 m/ g6 Y$ N8 ^4 K! G7 X& B# ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, Z* E; R- e9 H3 iborder:1px dashed #000; ' f3 { f, t* s; O/ k
}
: c r0 B" @. T. R+ L4 i! k2 M2 }4 H--> % w4 p& T3 v% s
</style>
2 |' |8 }* b+ R$ |6 {! b5 h# ~/ b</head> - i7 a# Y7 O' z. d
<body> ! n" m' r( s3 _6 @5 S
<div id="pic">
: m/ n" s: o/ z# ?+ H* o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ W; _6 V) \7 [. z: M</div>
1 ~# z, l0 j$ a( b, @</body>
) i$ o* Y8 a% O: w* H</html> |
|
发表于 2007-12-8 14:55
| 