|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ n% c8 d+ X5 Q3 c8 q( I4 m1 ?关键在于：max-width:780px;以及下面那行。/ V0 H4 j- v% J m: U' D6 q
固定像素适应:
) Y) G2 N1 y+ u) u. B5 e1 |
$ p" S W5 R5 v7 W9 Vdotted; 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> 以下是引用片段：- P% O0 C1 |5 W" Z6 O; [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + s: B. q9 V& G* p
<html xmlns="http://www.w3.org/1999/xhtml";>
K3 g) w; d' N. u6 g<head>
. b) i' Y- B# b2 Q! o5 C<meta http-equiv="Content-Type" c /> 0 R' o N, {6 `. A" [) k( L
<title>css2.0 VS ie</title>
4 p1 J5 l& w, D% q" n8 m3 M<style type="text/css"> 3 k0 O' X6 n% m! G0 p2 U5 a: L$ u
<!-- 3 N# V9 A6 A( y3 o7 Q, B, C
body { ) U* M, J8 G# K1 R: e% {
font-size: 12px; * J5 P, Q$ u% o' L( ^9 G
text-align: center; ' n# C7 a/ \5 q5 @. ~3 V% F
margin: 0px; ) b( W1 i/ j* d+ @, _
padding: 0px; / [! H* p/ Y8 E4 ?, o Z6 V7 |
} 2 G: t7 e. P/ o* ^
#pic{
+ T6 d* h2 F! [7 e0 d3 I margin:0 auto;
' e- q. P# u4 j& z width:800px; ' k$ Z9 x7 x# y+ a* E( E% x0 k
padding:0; & Z, d4 W4 K" X* Y! u; [
border:1px solid #333; ' N, f6 {7 P4 a! }4 `
}
% x7 Z# a+ |" O7 s7 d#pic img{
% q8 _2 T! ]( W1 k! q9 N' q/ U max-width:780px; : @+ }9 \9 O) m$ b8 {7 ]9 d/ g( g
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % i' I) x! D0 i% Z! @) j/ j
border:1px dashed #000; % a8 v; f+ k( i2 Z7 A& e
}
2 p; S2 I/ m" u1 F7 I" V--> ( S% b" V$ j5 V8 A+ v* e9 C* g
</style> 7 o( h n" u: o/ f: Z3 s% E4 o
</head> # D2 J- _" j7 ]6 ]; J, C
<body> & u: v7 G1 F8 ^5 X) N
<div id="pic">
2 F0 r+ H; G( G0 D& G6 e<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 b# | x5 q) c8 k. N2 R7 I' z
</div> % F3 r. M' v# B1 `% d0 a
</body> 3 L, d# c9 `- Q" h% {& [& i0 s
</html> - `0 k. ]( C4 }: p2 M8 n* K
2 s. L7 k, q: E; X# i百分比适应:0 l& n, I! z) I7 K
以下是引用片段：
6 L: U4 |/ ~/ q! D: @; b<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 V0 z z, k) a; F. G<html xmlns="http://www.w3.org/1999/xhtml";> . s& q% ]; d0 d8 k8 `3 A
<head> 1 a7 v# b: e, ? V d6 h
<meta http-equiv="Content-Type" c /> 3 `) S2 e3 t: T# A% g
<title>css2.0 VS ie</title> ) e* v0 X# J% ]- f! m- G k
<style type="text/css">
9 r- }6 {& l5 T<!-- 6 e( t0 O! i9 R+ m
body {
) K& ]5 C' B7 hfont-size: 12px;
H) c, O3 X- F; `$ etext-align: center;
# D X% ~/ n, f4 L; U* c+ Wmargin: 0px; 5 x4 h; l/ T+ ^6 ?# S, {3 O
padding: 0px; 8 j7 p- A0 P+ m: m$ ~
}
7 |% u& p& R# \9 ?#pic{ 9 `$ g4 B5 e2 e
margin:0 auto; + h+ u* o+ n" D% z, O+ ~
width:800px; - [8 k8 q9 e z- B
padding:0; ! j8 d& t& y q) S. [
border:1px solid #333;
% t& |/ N5 D* v2 X }
$ P- R7 I0 O9 ~0 M5 ^% }#pic img{
1 T6 u) [( l# X% h; A/ t8 k5 S max-width:780px; # c+ H i3 {2 I4 [& j# E. W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# V7 m, @3 f( f' rborder:1px dashed #000;
! l- }6 ^6 b3 [8 Z1 N}
( c$ A! j/ ?9 U1 c- q-->
/ P1 z1 ?: H: Q1 A' q</style>
2 f; P5 t/ v# e3 k/ @</head>
4 Y/ I8 f2 e( M1 f3 ^<body> : v) t- D3 c. K1 q- Z
<div id="pic"> 3 w! g) w& V! q/ M
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . G0 o$ f- V& @& m$ n
</div> ; o$ m# k" }. I4 R% ]
</body> " S+ w3 E3 Y2 D
</html> |
|
发表于 2007-12-8 14:55
| 