|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 `- B6 G, z* k
关键在于：max-width:780px;以及下面那行。
6 ^# d5 k* C; _- }8 V固定像素适应:5 w% d t# y& M6 l# J$ e! u
# N6 s* f/ F/ t4 U% n% `1 V
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> 以下是引用片段：# Q: D A! U, Q% V- I" a+ _+ W% ^' o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 X. m/ B& _, Y# f6 l<html xmlns="http://www.w3.org/1999/xhtml";>
+ T' i( Q* t# D: a" v+ K' }<head>
6 J# H6 N3 P4 ^% {& {0 k<meta http-equiv="Content-Type" c />
. \& @3 u2 @2 p" X<title>css2.0 VS ie</title> / i+ S1 n9 r! }8 {3 J
<style type="text/css"> 6 U4 r0 Z8 W7 s% z
<!--
' @' V& X+ z& X4 o0 g0 Tbody {
2 U9 o7 d) K9 {font-size: 12px;
$ p4 n4 D1 h1 Y1 N( ^. W* ntext-align: center; ; p( `" v: K' Q5 t3 O) I, e: W
margin: 0px;
: c; M& K) Q3 F5 t5 r2 H( kpadding: 0px;
+ N* V9 E! F6 ]7 V2 X( y} 2 k( J# F) L8 C' a( Q. \6 N& F
#pic{ : w+ O' J' A8 d6 a
margin:0 auto; # I8 P. p% J# n, m
width:800px; 4 r( `$ H4 C) [
padding:0; K; e4 |6 X0 f9 B; L
border:1px solid #333;
9 ^4 Z! W; p! v! d* a, j }
$ Q: R( S T6 Y: H! |, p( O2 M#pic img{
q1 t- n2 f; Y; ?4 W& v& ?' Y max-width:780px;
1 f0 O0 |: i! f' X* t4 |, r9 xwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); & q! Z3 t- h5 y0 f/ `2 U& L% u
border:1px dashed #000; 1 }' L, c0 l- b! L: n. P
}
8 Q1 }6 v* H2 m& L% G8 E3 P0 U- G1 {--> # S4 b# Q) a, d* u7 Q& m
</style>
' T2 y4 ^$ o/ N' G. }5 W9 Y( Q</head>
: y: |* U {9 A<body> $ j, o y8 ^6 |0 _2 W
<div id="pic"> ; ^: ^/ G$ i+ m* x! X; d* m7 k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 n3 v6 |- q/ l' `</div> 2 U4 X* J& y4 \( V* e; f
</body> : I4 p5 D3 ]/ X5 v
</html> ( W3 ]8 o7 c9 \6 a, N* A
" D3 D2 `- {9 X0 ?百分比适应:2 K+ q3 l% _; z5 }* Y. ~/ o
以下是引用片段：0 c/ P- x5 a" U6 t. C% j, g8 K, G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. k8 R5 _* K! p. s) v1 y<html xmlns="http://www.w3.org/1999/xhtml";> 1 O% J$ N* V2 T$ x0 z/ S
<head> 5 E' `2 F5 c; k8 C" @
<meta http-equiv="Content-Type" c />
4 q! N1 r- Z( j/ ?) i<title>css2.0 VS ie</title>
( w$ m! p9 _/ [6 `9 _, v9 d1 O<style type="text/css"> 6 h- X. K* A: x
<!-- ; N( R, I n g4 d) {) O$ u
body {
) z" b ]! {8 z- Dfont-size: 12px; . I/ z) H& |+ X9 S$ B9 Y. z
text-align: center; # A! J! H) J2 J- T
margin: 0px; 7 U! @2 Z! T1 ]9 L9 N
padding: 0px;
7 y- F }5 P: L2 @# L y9 N6 z1 x}
7 U7 o8 S+ h3 c, e#pic{ 2 L" S4 B" `- m
margin:0 auto; ; \' L! `8 C4 d' J2 k- b1 L. @
width:800px;
' ~! C! \& ^7 Z+ | s2 U4 N' t+ i padding:0; ) n" m( g/ @; k+ G" P4 J6 T
border:1px solid #333;
$ _" [: b# v! ?! X! D8 G# [ }
7 z. ?) T# P9 [7 X3 j, E) v8 d#pic img{ 0 L- \+ l) v) x& t3 Q1 B# ?
max-width:780px;
* Q9 J( n4 Y& Kwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ a, E3 f, D9 Vborder:1px dashed #000;
5 T$ _* I& a9 F# ]} ! t; ?, j8 |5 I
--> 6 U9 L2 h' y2 o0 f' Y( v$ }
</style>
7 C: o) t0 H9 G" ]2 _</head>
3 ?# Y; {7 \# O<body> , L# E+ P1 b3 V, b6 E+ D2 R U3 d
<div id="pic"> 8 @: [( n7 V0 o" ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' |6 A: S$ ]8 V' [
</div> & z+ C1 K; _) X8 I: D- c) z
</body>
* R8 W6 f: f& C9 h7 u) D</html> |
|
发表于 2007-12-8 14:55
| 