标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# t/ D9 a5 U" Z$ H) \* F: N' C- o
关键在于：max-width:780px;以及下面那行。
# v8 {) s0 u. o, F# V
固定像素适应:
- K C9 `- t: H+ r8 O+ {. V
( N/ y' E+ z+ t. h% a
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> 以下是引用片段：
O* _+ \2 W5 Z/ ]. `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) D5 t$ [ f7 E2 Q2 p
<html xmlns="http://www.w3.org/1999/xhtml";>
0 X# X% t: n5 [. @% f h
<head>
8 E- y6 K+ @2 g/ P0 R# \4 Q
<meta http-equiv="Content-Type" c />
$ m( Z: H0 U5 y1 ~1 l# [
<title>css2.0 VS ie</title>
" `. S A# `' I% M' ~
<style type="text/css">
+ n0 K4 Q- T" E: W' p0 ?8 ]4 G
<!--
/ h/ O- w6 y& L# E6 s
body {
( v o7 b; m$ h: y( ^4 q
font-size: 12px;
" C" o( O8 d3 u% M; B4 t
text-align: center;
8 D' d% x* C* P& m& X2 s. X
margin: 0px;
, O5 Q+ P" l0 E
padding: 0px;
2 J0 m; E5 u) d$ C. c# ~
}
0 N/ R. f# t& J2 z/ M* f/ {
#pic{
0 N: W$ Y7 Y/ T! ^$ B! K
margin:0 auto;
' Q* @+ n4 a8 V4 P0 h
width:800px;
) F7 v: ^2 E' |' b& J! }- x0 ?
padding:0;
) l4 ^5 [6 N! a8 S! j6 d( A- W
border:1px solid #333;
0 s& ?. m. e2 x5 G* X9 z' p, ]
}
6 ]: G* T, u. j. Q) M5 A Y4 |& A
#pic img{
( E, \* W4 L# `/ Y0 [
max-width:780px;
3 r4 ~* S* j' W9 Z/ K3 ^
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 @$ c2 O' `& O, z9 i& R
border:1px dashed #000;
& ^/ Y) a$ k T+ K" k; [# g
}
2 _6 O3 M5 B2 V& P( ?$ ?% P& i* ]8 D
-->
; }( ~, N# R# [. {
</style>
" Q6 N& @5 K- P) X% |7 v
</head>
/ x" u {) m y9 V% }
<body>
& t! d& o3 @: C# v
<div id="pic">
' {9 c& |4 S/ a+ ?
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 k' e& @: ^: W6 o2 n, ]
</div>
( a5 Z& ?# X& k- l1 f
</body>
. `& e5 J0 i" A/ d2 E% k3 Y
</html>
2 l& p: y: C4 i+ ?' k+ Q5 @
2 R" C5 C! c) {, L
百分比适应:
. J" f/ W& j0 J9 K* V% |
以下是引用片段：
# s8 J% W* E7 D9 S! W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ C3 ?3 S- ]8 \9 m, V( L9 I' j
<html xmlns="http://www.w3.org/1999/xhtml";>
: A- G8 z/ a4 t) v' t8 }
<head>
7 W, @9 P) U6 b% c, l$ y% n0 o
<meta http-equiv="Content-Type" c />
3 d! \6 \' z6 |0 i# f
<title>css2.0 VS ie</title>
7 |* f) W9 f4 x
<style type="text/css">
7 i( d- W, M$ }/ o
<!--
' U5 }+ Y' c, l+ R: m/ U+ D
body {
; ]3 B. J8 b# G; c) J. q ^) @
font-size: 12px;
3 s! Q- v+ l( }
text-align: center;
2 c& G4 A2 @- }5 P& c
margin: 0px;
, t! S0 o! z B
padding: 0px;
@( R% K& g+ V
}
; n+ r* A7 F' U$ o2 r
#pic{
( o! C: F. K" z" a! ^% r
margin:0 auto;
5 m6 ~) C* I/ Y) \& I ~
width:800px;
4 o' j0 `) G. i2 Y2 _+ N' K
padding:0;
K/ e. z/ r$ \
border:1px solid #333;
! R! U( L% F) ^( L1 t
}
6 ]% N* w& C: S1 E3 ?! Q
#pic img{
5 }6 ~8 `$ f' J) M3 [- [
max-width:780px;
9 o% d! }8 e( c% g( r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- u0 M9 @( ?; b- J K
border:1px dashed #000;
" Q5 h: ]# ?/ e' `
}
4 f/ e+ @% } S
-->
& h5 {4 f2 q% t% h# N# ^1 m% l
</style>
A Q4 [: s4 J1 Z$ }
</head>
s& p$ F) M. u. }" B
<body>
9 _& U4 Y) G/ G( A6 w5 d% i9 q
<div id="pic">
/ K8 o6 o% S7 F' Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
D* ` O" `" n! S! P) s9 b: I
</div>
# l+ h5 w) p8 _$ x4 o/ J
</body>
/ h9 v% q7 m+ w2 a W& B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
