|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, t) _" }: q, O& F# l, l
关键在于：max-width:780px;以及下面那行。! X: ~1 T/ ]) e. w) c
固定像素适应:
& c2 J1 k& X, ~- V: C1 |( F
7 _$ X5 X P7 w8 Z: a1 ^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> 以下是引用片段：
4 n" S; x8 U1 i, r1 o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 t) K1 @2 P8 n. j9 a+ F<html xmlns="http://www.w3.org/1999/xhtml";>
3 Y: S; Q5 n( K9 Y r<head> & g2 s4 n: h& U
<meta http-equiv="Content-Type" c /> - r- x$ }% b8 N1 w% w
<title>css2.0 VS ie</title>
% ]+ z5 c2 L# R( c1 ~# _: R9 L<style type="text/css">
0 g0 L3 D. D2 _4 R2 O. m' f# `<!-- 8 N8 C: [( |* ~! U# v4 `+ s. I
body { : z% t! T* L; h4 S, d9 O7 `* q, V
font-size: 12px; $ K# z3 L5 C1 b# j
text-align: center;
2 p- J! U$ o7 V8 r4 O) \4 E% g! E# fmargin: 0px; % `; }0 \% X f; \( W4 q
padding: 0px;
# L- r7 W7 ?% {7 u( s} & Q& a. ?0 ^2 i2 S, m, c
#pic{
' H0 v9 Q. N. ^3 c margin:0 auto; ; g3 @0 [" h: @
width:800px; 3 O. j# x% C+ z- r; Y6 X s
padding:0; : I% l% i4 d. o( `3 O
border:1px solid #333; N9 ~0 v3 u) Y$ O9 T
} ' e7 }, w; g1 P8 x; m: G4 g, \. g
#pic img{
, N8 g Y" B( {" n# L+ N max-width:780px;
' q; `3 n v' X7 \8 ^5 L! A/ Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ Y" Y+ d3 X8 v4 }border:1px dashed #000;
% p6 n, U/ s( V( m) Q. f} 7 D; P* n3 M0 G0 O3 F9 o
--> 1 Y, s1 f2 `* [. J: s. X' F
</style>
$ a- t2 d4 j- d0 l# q4 [1 b</head> 6 x5 Q5 @4 m: Q
<body>
5 h, T# B1 Y! X/ z/ o<div id="pic"> 6 u' }$ q4 M% S5 c# N, ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
E5 @: g$ i: F* W</div> : ? V& ]3 S0 d7 w: x/ w: @6 X
</body> 3 v; b/ Q$ q ~7 l5 `! T" z
</html> ' O( {- r `0 R, g% `0 z* A0 U
# _7 O" J4 f' Q1 _% f8 ~5 \4 Q3 B
百分比适应:7 d2 T1 A- L3 ]0 Y& U. Q( k( S; {
以下是引用片段：$ C8 Z1 n3 P* Z4 e, {7 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( |4 ^, ^+ _% N: ^<html xmlns="http://www.w3.org/1999/xhtml";> # F: c6 z% F% f- l
<head> ! {0 ~0 i( M& ?1 D
<meta http-equiv="Content-Type" c /> + W' E% [5 J2 h
<title>css2.0 VS ie</title>
4 ^+ t1 {6 y" d9 T<style type="text/css">
- I: U: C8 J/ x# S5 e$ u: n<!-- - O6 {( r! P2 C* F2 c7 R
body { , \" f. A/ x6 ]5 I
font-size: 12px; 4 Q9 N' D+ C, ?8 _6 E: v: B1 `
text-align: center; ' i k4 |2 x a, z9 V. z, r
margin: 0px;
1 A; Y( n8 y0 qpadding: 0px; - Q4 V* a2 C) X6 N( X _# ^- s
}
( a1 K% D; ]! r) C2 i5 T$ ~#pic{ 5 A5 b8 i' ]+ G: @
margin:0 auto; $ T* g' c& \7 J" w2 ~
width:800px; & x( h) E A4 Q9 h2 \- W$ e
padding:0; , O7 [! H3 y- J+ { t
border:1px solid #333; 3 r( Y$ k1 P( U
}
( z* v, \ t; @0 p. s#pic img{ * w/ A% S4 k$ ~4 q0 f
max-width:780px; 4 j) o6 o; M. \- @: K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 o! g+ m- w6 jborder:1px dashed #000;
: M |5 i6 m: S! k( v' g} $ }& d9 H7 S3 i$ t, D
-->
# J' }/ ~3 H+ I5 K% H* O</style>
) H \+ O* r- ~* R; |% E5 a9 P R</head> ! U& c0 E) l/ Q$ S" M' V7 F4 o
<body> k/ ~) | r9 e
<div id="pic"> ' e2 J/ q- Z2 E' T% p \
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, i1 {- u: `" N9 g. O* _</div>
9 O3 G, X4 B, J- {2 K</body> 7 S# t1 h! p8 k* \5 q R) @
</html> |
|
发表于 2007-12-8 14:55
| 