|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14163
- 金币
- 2372
- 威望
- 1647
- 贡献
- 1320
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 @ N! r; }& J$ G1 S9 Q关键在于：max-width:780px;以及下面那行。
& T1 t4 E' n O7 S7 S* j( ^( o& Y& _, ^/ e固定像素适应:, _+ e, m+ k* V7 \7 D% M
+ {- I; W" U- }. D
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> 以下是引用片段：4 Z: w# ?4 U3 |+ [5 d' @2 k) ?% T8 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& \% j( i `$ z& J<html xmlns="http://www.w3.org/1999/xhtml";> 8 O. b9 r6 B6 p* ?
<head>
- t, J' |" `; V7 ?- H* N* F<meta http-equiv="Content-Type" c /> ; C, f P( z# n3 H
<title>css2.0 VS ie</title> ! L1 j, X* C N- E, \* C. t$ p( I7 L
<style type="text/css"> ) M- h, [9 R' G4 ]. O
<!--
9 {1 H3 `/ }. D0 H; rbody { Z/ ], C, j4 `. {# d8 w
font-size: 12px; % Q$ ?4 @. J" @- d9 A
text-align: center;
; N4 O- |1 ?! M) C0 bmargin: 0px;
% p0 r. ?: c& x; e0 B& v9 [3 spadding: 0px;
* y: x6 E \" K. m} 4 ?! s( x, |: a3 h9 Z6 k7 [0 I
#pic{
/ m* @3 b% p2 d3 y- i margin:0 auto;
) I% g; P9 v; I# S7 G/ [1 i width:800px; 4 h! P8 |: i9 e4 p2 V
padding:0; , @6 v& R% ?) |* ?6 z
border:1px solid #333;
) L( U( R0 f/ c: o# \5 A# o% ? } 7 j6 W7 |: \0 w& D" Y/ k
#pic img{ # Q3 G% u1 C' B& a$ y6 h1 \# y
max-width:780px;
c7 R6 y6 x- T: zwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
/ l( ^. Q6 e G9 j* Q8 hborder:1px dashed #000; $ M) w5 ^, j0 e3 W& C
}
" W; W" n0 t5 E3 _--> + Z: q+ t6 |7 }* l; D- ]" u
</style> ! ]9 e! g+ [. \! o; p! Z
</head>
# L' L. d4 T2 _, ?8 _5 f<body> ) \1 I* b$ F6 j4 H3 o0 X
<div id="pic"> 0 n5 z! J$ G3 Y) x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( X* g6 J- j$ _/ o# ^</div> 8 ^0 [! H7 I! Z& z, S; _
</body> * m( C. c# Q, ^2 w' r" {
</html> ' D) X$ }, o1 Y3 A u% [- f
2 q7 v. _2 S. c: y. f1 @
百分比适应:* w* m0 m+ k; |
以下是引用片段：
- G' W$ N. t" p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' o$ ?( m: K( v4 u/ `
<html xmlns="http://www.w3.org/1999/xhtml";> 9 p+ l: \. Q3 r6 U. Y
<head>
3 ^' \9 z/ R4 ~) d4 K0 l9 @1 U<meta http-equiv="Content-Type" c />
c% R1 P1 d; O9 h) d<title>css2.0 VS ie</title> 1 v' L, ^* e/ v( r/ j1 T
<style type="text/css">
g+ \6 \8 U+ Q- S<!--
& O* q ?+ p" K2 a0 e" Ibody {
6 H. a& i; q f# a& M& Q' _font-size: 12px; : s: V8 L. o3 ^' K
text-align: center;
+ T/ f6 M) u8 _6 e9 [7 V9 Bmargin: 0px;
( e. m5 |0 x# U9 ^0 U! Vpadding: 0px;
! o- m/ P4 ~7 H. a: o0 b. X% J} , Y# W2 {4 }4 h
#pic{
F2 f3 Y& D0 c& |! F8 y9 q6 K margin:0 auto;
9 G- ~, `7 [& e7 b) b' I/ j width:800px; , v2 F4 G. E- s
padding:0; ' I6 `1 Y8 R4 Q; g; ?/ N
border:1px solid #333;
3 X9 H. _; r2 d) h* o1 C2 [% i } 2 C$ ]. `7 b! l5 Q
#pic img{ # Z+ \/ F! [6 I0 h |: \
max-width:780px;
$ j" z( ^! T+ ?0 qwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ C+ L: E- k' c$ c( T0 a! |9 vborder:1px dashed #000;
. i. B# \9 V4 C1 q& M$ e% s} ; h# t- _) B& L2 s7 a4 [
-->
: A; \/ p8 |0 E7 B0 U8 A</style> ; E% H5 A& v$ W- f, |2 o( u
</head> # \ X% D! c$ n: c# C: E- S5 c
<body> 8 o1 Z; @% V7 G; ?
<div id="pic">
2 `8 }) |+ |0 }3 c+ m( F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! U% H) u2 l6 |
</div>
/ g. I! C; @$ d3 C o% y* e0 o</body>
* P* {; L6 `% P</html> |
|
发表于 2007-12-8 14:55
| 