|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- j, H8 O" ~) J8 R
关键在于：max-width:780px;以及下面那行。
0 k/ P/ O3 R4 M7 ]固定像素适应:
6 v4 a& ?, h1 j8 w+ x' S
+ I! u4 b: P6 g+ s% E4 B* E4 pdotted; 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> 以下是引用片段：1 U" m; l8 s! f. Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 Q6 U e: H* c% M. T1 A
<html xmlns="http://www.w3.org/1999/xhtml";> 1 `" `: ~8 ~& u1 H; C# \) t
<head>
" R2 o0 u) O& X; r<meta http-equiv="Content-Type" c /> 1 Y0 ]6 u9 m' K! E3 J4 D
<title>css2.0 VS ie</title>
# W9 \; y0 ~5 ?+ g1 r<style type="text/css"> , s4 B; q/ Y6 \
<!--
+ t' W/ F0 n1 g+ W f' ~: wbody { 4 g$ f9 [ q' e
font-size: 12px; ! |% D! L7 Q0 e- \0 G; c- q
text-align: center;
- {& ^% U; n p* w+ l8 A2 z6 nmargin: 0px;
/ [8 v& b2 x2 k- ]2 V* l. gpadding: 0px;
4 Y$ |7 ]4 e" V Z}
9 q2 o v6 g8 k9 U4 N#pic{
! S0 O2 K7 Y% _1 ~. s margin:0 auto; & l5 {, B, O- M/ N
width:800px;
5 S% u) J8 B2 I$ K0 l0 k padding:0;
% ]' Q6 ?$ B: y [+ a# ] border:1px solid #333; / u4 z4 h* H7 V3 V$ m8 z4 q
} * ~' [( Q, T* p( X
#pic img{
$ h9 A4 q' m4 d, J max-width:780px;
, U' \. d! _, L+ D! P# }% b7 `width:expression(document.body.clientWidth > 780? "780px": "auto" ); + H) S) @- N$ H- D8 Y
border:1px dashed #000;
) V- d4 z& J/ B! b8 [5 e! D}
1 s8 _& Y4 n# e9 Y6 @-->
# `! t4 Z4 q) A( E% e</style> , Q p3 y' R+ r+ M& T
</head>
. S" h- a: W7 Z1 D: U: T<body> 6 a, C( h* K4 R
<div id="pic">
) v! {7 E9 U: X; x- u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & S. y5 ~6 K, }' A* v
</div> 4 s$ m3 E. O- l% Q# m( D# E9 w W
</body>
3 P% L' ~8 r, m) y+ W</html> 9 x% }) X/ T6 v9 x6 R7 V6 m
, F1 l9 {/ v& i" e: n2 a6 U
百分比适应:$ _- N" f, r+ E* U7 z2 J3 H2 g: ^
以下是引用片段：' E) ^! Z& p$ b6 L9 a0 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 ~( ~$ L: w- v8 g
<html xmlns="http://www.w3.org/1999/xhtml";>
- \ p8 \# [. c8 R5 Y<head> ( k( E2 y" f% y1 a2 ~5 u
<meta http-equiv="Content-Type" c />
9 z6 V6 r+ R* \! u6 B2 c! E<title>css2.0 VS ie</title> # Z% d* h) U! a
<style type="text/css"> 8 U! E/ T6 d+ ]4 ]- E8 K
<!-- - q: V3 F ~! q+ @0 i
body { ' D* Y( w0 u- s w; L
font-size: 12px;
9 {! J: T8 N; ]1 m7 s0 ftext-align: center;
$ u, e% O$ D9 u4 P, G( b3 ymargin: 0px; 2 z" z4 L, X4 q$ x; f% X3 q' u/ O
padding: 0px; $ E4 O3 [/ L6 u8 q: z" H
} - S& m) }( O) e$ a# c3 E" Y
#pic{ 6 j" @, x4 `' P% h* h6 R
margin:0 auto;
* `( `: H5 L- p8 I4 Q width:800px;
6 S8 y* v7 c0 j6 ]3 h. @ padding:0;
/ t6 V& f% k0 I. O9 ~7 ?1 n border:1px solid #333; + z& ^6 h& K/ F! B
} * E* o8 @$ x- j/ q
#pic img{ 5 T& R) G P- a' U0 G6 u( [
max-width:780px;
6 _4 m! c# O6 }. e$ Y# d# P# Dwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! ~ ]2 B7 T' ]( L2 j9 U% [
border:1px dashed #000; t3 @! V+ y2 U" J( R( v* H
}
8 ]0 S. h f6 q0 i: i! B-->
* L2 s! w( O6 ?; F' R0 d7 m</style> 2 f6 h, Y$ P. K7 O6 _+ R( M
</head> 0 S+ q. r" l* x" _ v' c' Z
<body> 2 J3 `1 x/ ]* g$ Q* V2 v
<div id="pic"> ( u1 {- e3 T5 y" \6 c' U3 {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + u: L2 F9 j$ j# m: x. H
</div>
! M4 x9 M4 D, c+ N</body>
5 P* p$ I' ], J1 S! a9 M6 T1 @</html> |
|
发表于 2007-12-8 14:55
| 