|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 E& c0 r: `) q, ]
关键在于：max-width:780px;以及下面那行。
$ \" ]2 b; j6 |% ?固定像素适应:: |& U0 o2 m7 k; L
3 P% V0 O" ?- d& @1 q2 p2 N
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> 以下是引用片段：. x0 c& S7 n+ _( Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 }. z" X0 b7 _' o- ]% y% E. r
<html xmlns="http://www.w3.org/1999/xhtml";> 5 y- ^9 z) R. c
<head> $ ~0 V: f" ?' j0 _' k
<meta http-equiv="Content-Type" c /> ; h9 K# I8 D8 m8 R
<title>css2.0 VS ie</title> * H- Y1 Q% D+ m- L1 [
<style type="text/css"> 2 Q5 i- D+ P! x z7 M- \
<!--
( {' n( x7 K) ^6 b8 B5 T" Fbody {
3 `. B" ^5 E1 f( \+ {5 _( H4 {font-size: 12px; ' T0 A5 w6 v) L# E( R
text-align: center; : [- ]5 V" R- z/ i& b, r8 J& i
margin: 0px;
- `( _2 M5 ^2 n F; H, @( Rpadding: 0px; 5 e/ W+ y. I9 v8 t$ G
}
& X1 P L+ _ @2 F+ _#pic{ 6 N7 B& V% O$ r
margin:0 auto; 1 \; X1 B8 R1 h: F4 t6 K3 k
width:800px; 7 ?& S3 d- s8 Y: N2 x
padding:0;
$ V7 N* b, l2 V0 n* v border:1px solid #333;
& Z# h$ I* k# q+ N8 B$ g% l } % w& O3 I! ^( g' k
#pic img{
/ |1 v: g& g$ j( h3 A max-width:780px;
5 f- w, Y8 P; t) _% X/ _3 Jwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
7 M/ p8 d5 @& [3 Z/ pborder:1px dashed #000;
, q% w2 a9 c6 a. I}
5 Q; h9 Y" A/ \$ y--> ! ?+ n+ `) D" b- x
</style> 4 Z, m) }. x: z7 E! C* D
</head>
2 J0 k1 b# L- R<body> 5 p% v$ [* ]! g! }- {/ A; r1 e1 ^4 Z
<div id="pic"> 4 `/ n) d* x3 u- D, n. ~4 {$ z T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & w: j( z, u& E0 n7 Z
</div> ) o g! M3 t; A0 }; \- H4 n
</body> 8 a) K* s! R8 x% Q" q& w, o D/ w
</html> & q. \& R9 G3 ^. M* J) `
: n" y, B0 V+ r: E9 x
百分比适应:( T1 z# ^8 E! [2 F/ U. F
以下是引用片段：% G! F2 Z) o, o7 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 k& t% q6 J8 C0 ]3 b) A
<html xmlns="http://www.w3.org/1999/xhtml";>
( a" D6 N+ v# Q$ ^/ K% ]$ Y<head> 9 E" r9 e( T4 A; b( X6 l
<meta http-equiv="Content-Type" c />
3 _( N- r' t5 q6 n, A<title>css2.0 VS ie</title>
# G8 J+ \/ h5 ], `) G1 F<style type="text/css">
+ |8 u5 \/ W6 z) z7 u* I4 s<!--
2 q( }: n) f* Ubody { 4 `5 |. A! Q- W
font-size: 12px;
, e- F* q; L; N/ ?& V$ R6 Htext-align: center;
3 Q! q/ K# x* a5 z" J" k9 O4 Imargin: 0px; ( N% r1 {+ Y. Z& T2 {3 E0 K8 W; [& t
padding: 0px;
! G: a. l% m7 R} - j% v5 `* `3 O% t+ O7 S5 _9 C
#pic{
( o' T! P) e# z$ t margin:0 auto; 7 W$ t. A% I! ?# t j! z
width:800px;
/ w& P) `% Q9 ` padding:0;
9 D, [. J/ f2 y1 Z2 c* d1 a, k border:1px solid #333;
* S8 t& b, {2 D7 q1 e9 t } " t- o( J# k( U1 ?$ X/ I$ R
#pic img{
7 Y0 Z; S. b) ?0 @* A' m( }: _ _* l max-width:780px;
' }, i2 g' j4 @2 s5 }) }' Rwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - f1 _0 W5 j: `. b
border:1px dashed #000; 1 @: G: ?/ @- j* w2 t0 e" i
}
/ l. _& b# o4 a- ]--> $ M; l% O# `! L; Q
</style> 1 ~% r+ U8 u: D, s" |! \
</head>
" ]3 o- X$ y, G, X4 s0 _% v<body> 2 L) E, J/ U# e1 l' L8 v
<div id="pic">
! S+ I. Z( x3 G7 \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! u7 \: g, j/ M4 t4 U9 p
</div>
: }% W. x9 N# x4 e4 T- U7 ~& G</body>
( g4 t' B# m' R, Q' v( l4 E' Z* Q4 |</html> |
|
发表于 2007-12-8 14:55
| 