|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14385
- 金币
- 2478
- 威望
- 1647
- 贡献
- 1426
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" ~7 P) Y+ ^8 ^# o/ K" Y
关键在于：max-width:780px;以及下面那行。
5 Z, e! U% Q& T& U固定像素适应:
% W. L: g) q8 ^ C
4 [( ^/ z" {' T4 }! W" Bdotted; 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> 以下是引用片段：7 R/ ?8 X S9 ~+ F8 F. o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 X2 R0 F# V& {4 l8 _2 O: F6 z
<html xmlns="http://www.w3.org/1999/xhtml";> 5 @: q0 m4 l' s7 c' a
<head>
# ?/ w* c! w9 `) u$ @ N<meta http-equiv="Content-Type" c /> 2 S+ y2 [$ ?1 f& W- |1 G
<title>css2.0 VS ie</title>
- d# [. C. m) }2 O& Z( T; h. `/ J3 q<style type="text/css"> " m8 O! v7 l s" Q: S( X" }
<!--
1 q7 H2 H0 K5 K4 V r* `body {
# Y" |; {0 M% J# j% j, o3 C2 wfont-size: 12px; 7 f2 o( J7 p8 ~2 C9 t& k* z+ z
text-align: center; : l b: k0 O+ W4 _! {
margin: 0px;
: _1 J- _4 e1 F* upadding: 0px; $ t$ N4 m, F( t8 ~
}
- w/ B& a8 B- ~1 H3 Y) B! F#pic{
5 [: R# D, A6 o/ ^ margin:0 auto; + O3 p3 I5 j0 W: m2 v$ C0 N
width:800px;
$ [' M) ], m- T; J9 B" c( b padding:0;
4 ^; c/ n& q8 W ] border:1px solid #333; 9 Q, v7 Z( {' E2 b/ R
}
8 M4 h. Y9 l1 M4 w#pic img{
; h9 T: K/ V" K6 X; M E max-width:780px;
9 t1 ?1 _0 ~& {5 [; h# y1 Ewidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 0 \0 f; V$ o7 [2 W
border:1px dashed #000; & m4 f9 J P( R
}
/ k! @; N! L5 |$ N--> 5 R7 }4 v2 A$ E8 Z, P" L
</style>
6 Q/ {* d. L- n" D) M5 w</head> ; E) l' I# x5 @0 m
<body>
; u8 B* j1 W1 r' q8 V& ~<div id="pic">
7 n2 b7 y5 g( X% U3 y, o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; R. z# x m8 Z( o8 O* t
</div>
$ D% k( g3 f1 a* k v1 ^, D</body>
8 e& }( k( C% l {5 ]* C</html> 7 f: H; f. e" v2 ?9 X
% g- T# h$ f* _, L, a' ?& w9 g百分比适应:- n0 V8 H9 L8 X0 F' n* N4 G
以下是引用片段：
) m- S# q' s `2 G6 p- D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # R5 p% I- Q" A' V. ^: b/ w5 M/ c
<html xmlns="http://www.w3.org/1999/xhtml";>
, [0 f& ^, w! ?3 O<head> / U9 k3 d5 h- u. Z5 `( q& {
<meta http-equiv="Content-Type" c /> % w4 r t- K. b) P7 e* k2 L6 r
<title>css2.0 VS ie</title>
- Y2 m6 ~% Y" F/ F+ R4 D<style type="text/css">
& y+ X! ]9 k: X Z" V" v<!-- 9 x7 S( q1 O a/ _; g6 F( e3 j3 C8 L
body {
. D: x! ~8 o+ _/ \% [3 r4 T) H- ofont-size: 12px;
! R! j I6 Q) q, Ttext-align: center;
6 k, a. d! S* ~4 Wmargin: 0px;
) @& F3 ^$ \; }8 i4 qpadding: 0px; ) ~& w; I% g. l, x
} & ?9 F0 G: `1 q, |6 z
#pic{
; n' E3 a0 E+ S" z1 B. i margin:0 auto; 0 V X' V7 @$ m# T* k! ?
width:800px;
! ]+ u2 l5 S; b% `3 ] padding:0; 0 L. \& A" y! k: @
border:1px solid #333; / Q; Z3 g* l9 I8 {, a& v2 K7 h; |
}
# }6 V( I, v* O2 {#pic img{
$ y4 A! c- c+ ] { max-width:780px; 5 D( d6 P3 B+ H+ e; `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ b7 Z, m8 }% y& b1 o8 X- R0 Dborder:1px dashed #000; 6 d2 o5 @4 [0 n0 [: y) }( Z( L& v4 c
} # G [+ U, }& h: e
-->
, U9 @, R& c/ {. }' _) _</style> % s5 L3 P# R/ U. N! `
</head>
4 e' A. O3 R' J* q8 _- ^6 ]9 \<body> , `2 T' S) X; R; B5 s+ n
<div id="pic"> 2 b2 A5 A4 g2 k# c) g7 r& L2 q2 ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # ?0 A, ]8 n, S6 K4 e- {
</div> * c) Z @& I5 @' [/ ~" ~1 O J
</body>
1 b3 N! J" G5 K( q6 w</html> |
|
发表于 2007-12-8 14:55
| 