|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14403
- 金币
- 2487
- 威望
- 1647
- 贡献
- 1435
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 M! b/ F! o0 T4 Y) ?* K3 a' ~' s关键在于：max-width:780px;以及下面那行。% V: o; p+ e1 P9 a, _7 z0 s( r
固定像素适应:
" e0 p; w+ z2 u
% E1 ^ M. G3 X, Y) Ndotted; 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> 以下是引用片段：
R! L$ ]0 t. m! T: U( H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. ], H. i% U" y+ H$ ]! q3 n8 _2 V<html xmlns="http://www.w3.org/1999/xhtml";>
1 h4 {( g4 u8 c$ r1 e3 {# Q7 a<head>
( T4 l% K6 }7 F9 s3 L8 ~6 p# i2 @9 @<meta http-equiv="Content-Type" c />
( ]% A; a1 p1 _. p& C<title>css2.0 VS ie</title>
- p+ U$ _& j0 j# q/ I<style type="text/css"> 0 K3 H- H$ W+ y; v( j
<!--
[% ~; h" u- T; L7 o% ibody { / o" v; f; ~ v) ` `
font-size: 12px;
, _ X: c+ g* a4 b P# @text-align: center; ) c$ ]& E: F/ I8 O: L
margin: 0px; 3 @- W1 g1 h5 Z% ~4 s$ [3 \
padding: 0px; 7 E" A3 o) U% t ~+ H2 z
} $ H; L! a7 u) z! Q, s
#pic{
, l9 h, H- I8 f! ~4 P. W/ t, h3 \ margin:0 auto;
+ K3 k6 X7 Q3 f, [ width:800px; $ y. V0 I: ]; u6 o1 L
padding:0;
* W1 t# `$ g: p" U8 n border:1px solid #333; . Z; S) x- q. h$ x k$ E6 T- {: ]
} 7 r4 I" u3 [5 d1 }# h4 d
#pic img{
3 ]+ f, S5 R I' ?+ w; N7 z* L1 u max-width:780px; 5 a. v8 y* X. q- I2 x) @6 t9 |
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! Z4 I: w* f% J) p M6 W6 _1 J# o
border:1px dashed #000; 3 m! z0 e2 e( h: S7 H
}
2 i6 Q0 ]) Z& K, [7 e8 I$ \-->
% t" s; A+ l. j$ W! E4 z</style>
/ l6 C" S! Q( q</head> / X! [$ I K# \5 }. N* p* O
<body>
7 H: h* `+ z( c' Y! {) \( V, N1 J5 `<div id="pic"> 6 b7 c" u4 [" S; d! q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, ?9 T$ Z) e3 N/ m3 W</div> 9 d, E% z5 [0 K* m3 u8 V
</body>
& |1 [7 J# f+ {3 N</html> / Q6 ]) g3 w7 C( {1 Z
" g5 a6 ^* ]3 X( e9 c9 e9 ?
百分比适应: W# e( H5 c) Q, O* \! C
以下是引用片段：
4 K( B8 _( [3 Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % {: R7 Q3 C f8 \% X5 O0 a
<html xmlns="http://www.w3.org/1999/xhtml";> 9 Y B& |# K& L( v. D
<head> ! m2 L/ B# I: Y. J
<meta http-equiv="Content-Type" c />
r" `& W, T9 h3 n( z; H<title>css2.0 VS ie</title>
8 \" f7 n1 |) d: D% f/ b8 ~9 m, G<style type="text/css"> $ Z( @4 V3 X' s; |" V+ K/ p
<!-- # _6 Y5 h+ I+ ~7 G4 ^4 j* Q
body { % F# c6 a8 B4 h+ F* s. F
font-size: 12px; @ X* d! m8 O
text-align: center; 7 g: S/ X. p I) _ {3 r8 r
margin: 0px;
/ y0 B0 E7 ]2 O; a4 h& W' i/ epadding: 0px;
" c! L: n* |% d l* ~" i# G3 r} 2 P: v- T" N+ h2 x
#pic{
# w9 }: k6 a0 Z- }* {: M& T margin:0 auto;
! ]9 F! G/ i. N2 k$ ]. {' c width:800px;
7 j+ R. k9 k' A6 D$ T& H1 S padding:0; . g, Z2 w- k/ c( C7 c
border:1px solid #333;
! h1 C6 T3 b& [9 B: @- P }
# w8 j8 s5 p6 I7 k) \% X, y#pic img{
1 O. F1 @/ z6 n$ k* G- N+ ] max-width:780px; # V" S R3 u3 s7 G% ^( c U, A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 P$ M* X U* n/ w# g7 S2 @
border:1px dashed #000;
) @# D# n- u+ g5 f- G1 l, q} * C' X* c' c+ h+ I" ~
-->
- v% n, L5 T. d s5 j/ M</style>
! F' F% L! c( e4 X& P( L</head> 1 t1 E. Y6 ?6 g% p$ @$ b. d7 c- s/ y
<body> ; |4 z8 R( u' {- f
<div id="pic"> g6 r8 }1 I8 o# i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 o" K6 Z9 g% g: G</div> / @8 V- T2 c8 }, }& ~
</body> # k$ [5 k! ~+ D- A Y; K
</html> |
|
发表于 2007-12-8 14:55
| 