|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( c) |: k- T3 v% h2 \关键在于：max-width:780px;以及下面那行。
4 b$ v, w" A; Y固定像素适应:
* j3 h- F* e$ d- X. V9 i; |* e1 S7 f0 i# i
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> 以下是引用片段：* m0 d" g K# ^& E. O5 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 J7 A- I( m0 t) `' M' S" X$ N<html xmlns="http://www.w3.org/1999/xhtml";>
4 y1 f1 c* [. W- s<head>
: x- v2 M" W" H8 {( l4 X7 |<meta http-equiv="Content-Type" c />
; l! J4 A H3 g; D2 T; ^ V) |<title>css2.0 VS ie</title> 8 I! P' Q8 C0 C5 W
<style type="text/css"> & Y! l6 ?0 I7 x" X( l$ H; r
<!-- 2 ]" a& E. U% g
body {
& U' C/ ^% v$ P( J( jfont-size: 12px; * k. j4 W- a; S& O( X
text-align: center;
, h- Z+ s3 U7 V$ u1 tmargin: 0px;
) ?/ a7 S' e) |* A g lpadding: 0px; 7 I. S( w# s1 ~- F& Q
}
: B f" G6 ?* w9 N& |#pic{
8 g p7 l$ R4 p3 O margin:0 auto;
" s" H* x* W( i& t- e, j width:800px;
) h6 W6 l( `% I6 B: s: v padding:0; ( r$ Q2 s/ w+ Z* e r' b' I5 V
border:1px solid #333; * |0 G- L4 x1 ~( t' [
}
2 i% S8 Z2 W A. o2 B4 ^#pic img{ " _) Y; q8 R5 \
max-width:780px;
; A# E% P9 e4 t- K' v9 }9 G0 }width:expression(document.body.clientWidth > 780? "780px": "auto" ); : P7 U6 v5 j, k8 X' s( V
border:1px dashed #000;
+ q7 n* w9 U- c0 ]) B4 u7 i, a} . N4 Q( P2 P& L- V: w1 h
-->
0 y+ |4 D# m# |+ G3 E; z( n</style>
8 m6 V- }8 o$ d# m0 S</head>
3 T4 t* L- b- t7 w1 W' N* I6 A<body>
) R0 J+ X& B+ E: M% {1 ^<div id="pic">
; q6 n6 v& Q1 `6 V. o4 ^% h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 \4 b" {$ Y2 H7 N) z</div> 5 j, b1 J u) o9 L; N) Z' A
</body> / V4 r$ F( Y/ T: M
</html>
2 k* `- e: q: e# B8 w ~; ^4 E; y+ H" i4 Z" z/ D
百分比适应:8 |- x. ?. {* r. t6 ~) u
以下是引用片段：3 b' ` o( w$ [8 F9 E3 C% h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 U9 S" v, d f: V& M4 w4 q/ x1 P* _% A
<html xmlns="http://www.w3.org/1999/xhtml";> 8 P, d1 K/ h0 t6 l3 W4 w# s: g9 n
<head> * r# r3 S, `9 l8 n; L% W
<meta http-equiv="Content-Type" c /> : y9 w. u2 |, F- q- V
<title>css2.0 VS ie</title> - j& M! p- j7 V( U1 K3 z+ ]# _
<style type="text/css">
F k$ [# a& h8 h1 P# W0 v' A0 z) F<!--
0 U' |" E0 _& Z# m, ^9 J; \body { a2 g4 ^6 d5 {/ f7 p
font-size: 12px;
1 s( R5 s3 L# {- d3 y& Stext-align: center;
9 E3 T) a$ b _# T% ^margin: 0px; 6 k6 k1 k* L7 Q# ^% y" W& `
padding: 0px;
( _5 V0 c* h. w1 _$ C' h9 G} . j( X- b* ^4 m6 W+ r2 a- a- D- W
#pic{ 6 g0 R" R; A2 s5 D( j
margin:0 auto;
$ t1 f' q" L& I! M1 i- p" O& O. M width:800px; % |& c" X- x( T9 A
padding:0; ) [0 y* r4 U1 V. e6 d
border:1px solid #333; " \5 L" N1 w3 _5 }7 @7 `! }
} / c# a' o/ L: E" E
#pic img{
, y, D: c' `7 {: Q9 |/ |# | max-width:780px;
6 G; M" b' `0 b& nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; j) k' z% {& pborder:1px dashed #000;
# I( ?/ P6 }( V0 R6 l}
6 ^. `: G- i+ B: `' S-->
! t; m8 j0 _# ?. A6 P' c) i</style> 2 ]% f6 O& \# N" R8 V( I
</head> 7 B3 L" S( \8 g' P" R3 e# Y
<body> 7 e2 n1 I$ K8 W4 G4 P3 v) v7 H
<div id="pic"> & j7 M$ l) U2 ^: _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' r& g/ N# F; s5 j
</div>
$ K }" x# f; A! y! N</body>
% K8 V1 G, V9 m4 h0 A</html> |
|
发表于 2007-12-8 14:55
| 