标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" I5 Q0 g0 |2 N9 T6 y9 W
关键在于：max-width:780px;以及下面那行。
$ w( I- ?) w" b. ?3 W' \8 ~
固定像素适应:
: l+ [$ _) L, y& I" e: ]
* k& ]! E. U( T3 d! H7 t
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> 以下是引用片段：
+ j# E4 |2 m2 F$ ?* q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* I1 w+ b' Z) p9 O
<html xmlns="http://www.w3.org/1999/xhtml";>
6 h) G: j! }( Q# G3 O9 l! p3 Z
<head>
7 u# V3 E. T+ u: k
<meta http-equiv="Content-Type" c />
, p- u" F; f* m, Z
<title>css2.0 VS ie</title>
x! n- f. K4 d# V R
<style type="text/css">
2 b$ }+ }9 T8 W9 a( o* s; R; c
<!--
5 \/ `4 l, m! M7 }$ R( A- m
body {
5 n; D" P& C) ]& X
font-size: 12px;
V' N% [. J4 h0 z1 X I
text-align: center;
2 `7 i7 B0 ^. O/ c. c, A
margin: 0px;
/ F; a7 ?' _) x' y
padding: 0px;
2 v3 u8 n1 Q, `/ V! k# e
}
$ P& q+ H+ _+ @; U+ A
#pic{
. Z/ ~, d- Q9 Y3 M. }$ @) D% u
margin:0 auto;
6 J/ p n" C5 Z) U% {+ q" ?9 P/ ~' t
width:800px;
, e& w# T+ C, b( T
padding:0;
. s6 q. @6 l! X/ w
border:1px solid #333;
) U2 d8 ?6 J0 b, ~
}
9 q8 P( z3 L5 t+ V6 o1 K, U
#pic img{
. h- y- H* i5 v7 M
max-width:780px;
' n& R) r! {, z) G9 u
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ o6 X) _/ ?% s! n; |: R9 @9 {/ t* u
border:1px dashed #000;
3 K& v4 U L2 l7 l4 a. t, {8 J: d+ J3 p
}
6 M2 x' |/ T& L1 O2 E0 \6 P
-->
7 E1 H" c. T: i
</style>
% X% [# m4 e; Z) V
</head>
, n4 g5 c, u R
<body>
, G2 O( M; X: S S+ O* v3 B
<div id="pic">
- h4 K, m* s1 r; R/ G9 M2 _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* U% N: b3 W: b& i2 r; Y
</div>
) B) G% X' V/ v4 J% \1 N& u
</body>
# O: J; p& x! P
</html>
* f+ T; z$ M L- M' h; H
5 F- U4 \+ T/ T9 r/ J) j, r
百分比适应:
3 F+ ^" U* j* O5 O
以下是引用片段：
$ K* y8 d+ ?/ z; I: f: `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ i5 K0 }( k) ~/ H5 D! ?
<html xmlns="http://www.w3.org/1999/xhtml";>
3 X; s+ h8 ~& p: ]
<head>
7 i$ x. o# `6 C
<meta http-equiv="Content-Type" c />
; E8 w$ f+ Q R: ~0 i
<title>css2.0 VS ie</title>
7 ]* a& ~1 ?5 P9 m) }% w' x6 t; o) H
<style type="text/css">
, g5 ]0 u$ j a, z( K- Q
<!--
- n7 I2 ?) K5 T
body {
1 R1 Q. Z, C# U4 g
font-size: 12px;
4 U M4 p5 G- R( @- g
text-align: center;
2 W/ \8 d/ N. H4 Y# ~; Z
margin: 0px;
3 Z% `- G/ D' B) G) P3 @: u
padding: 0px;
7 A8 A, V3 \9 q6 v2 F3 K8 Z
}
7 {/ l# x3 g9 Z: m+ y N% N
#pic{
& G5 N* a# F1 \2 `& _; S, I, S
margin:0 auto;
6 j8 `' `0 x$ [% `" k# N) ~
width:800px;
/ i. D4 O- a& i! u% L' ~# r; H& l" A
padding:0;
& K; y, P e d w b$ C
border:1px solid #333;
( k% n! A! r2 {% S
}
' X$ h+ o& e3 W8 K6 \
#pic img{
$ `; k3 `/ w) L5 C
max-width:780px;
- _% A3 s2 L, S9 G6 p ?( h
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; \3 B0 E5 y% v, a, {9 R4 u
border:1px dashed #000;
. e4 N* o5 u ~
}
) G# T% c* X- V( E, c0 V! k5 D. \+ j: m
-->
# s5 V9 }; D* \ J
</style>
4 t! Z* y8 L# S9 }0 u5 D% k
</head>
, x" M" r' a, v
<body>
1 A+ f& {: B8 K4 }) S+ h
<div id="pic">
0 H1 U* }( B/ l' ]) \$ Z. Y3 J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 H. w- H/ p3 O, Y9 c) U
</div>
; k: n2 G A% f- v& F8 H, [
</body>
0 L V& h! e7 y6 k$ x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
