标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" ?/ v! D, q! Q0 b3 U( D1 r
关键在于：max-width:780px;以及下面那行。
- t3 }6 m/ w* I( y# s; J
固定像素适应:
) ?( [4 h' e- p C: k2 i$ s
5 h4 l! n- x# X9 U2 C' J
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> 以下是引用片段：
, h% V+ V0 k/ _. a( A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ H9 b- Q0 f& x! F B5 {
<html xmlns="http://www.w3.org/1999/xhtml";>
/ j* X2 L* G& d) d
<head>
4 }4 n K, k- x( ~' y
<meta http-equiv="Content-Type" c />
( o- Z$ L$ m |' X
<title>css2.0 VS ie</title>
% a7 z; N7 M, p
<style type="text/css">
9 p7 k3 l6 ]# p4 v$ }
<!--
+ B, |. ]1 [# O/ c6 n8 x$ S
body {
8 `7 c# j D, w4 N" [
font-size: 12px;
N9 O6 V6 \+ k5 R5 |
text-align: center;
8 h( L! N# S0 _" V$ m! r7 i" Z
margin: 0px;
4 a9 I& p4 e% F; b
padding: 0px;
' x! j. y+ k, e. E, f* V
}
1 {* s% ^( k9 m2 V6 j( J
#pic{
7 W6 j* d* j' ^
margin:0 auto;
% ] a5 K" c3 M- p
width:800px;
- G/ c9 s6 |5 ^' H% b+ b) r# A+ q
padding:0;
! P( B* D$ q1 }/ ^- ^
border:1px solid #333;
. b4 K. h4 E a4 ?6 y- G
}
! U0 H, } o% w
#pic img{
9 v" ~+ k7 W4 @$ P: ]. u
max-width:780px;
6 ^, w3 J; z1 J3 S& E: H9 c. K* f
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' h1 i5 l' F P3 [% _
border:1px dashed #000;
& Z) P, M6 q% x8 N, ?6 [: P$ v
}
1 g" h6 D' }" B( S2 x6 B
-->
) a, X( O. Z3 @
</style>
. m! V2 i8 [3 y! a
</head>
7 j* }' C5 o0 b9 N
<body>
1 K: N+ V, U, z! Q
<div id="pic">
6 e$ P2 F6 F8 W: M4 ~
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 G8 s' x% G* a- P& N& q' C: m: |* ^
</div>
B- q) Z9 S v! V( c
</body>
, Y) g! ~6 _8 i$ r
</html>
: r% w2 @/ X: d. a
# h" \! M( ?5 b
百分比适应:
# A1 S4 u/ \' A5 ?
以下是引用片段：
6 ^, v% c+ o) u! K: F9 [+ W6 T, |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 e, C; [, u# n7 D4 v
<html xmlns="http://www.w3.org/1999/xhtml";>
, ^ B4 \0 P: f9 w8 I* \- m
<head>
- @% M8 m, H0 @: D3 c# w# Z+ c
<meta http-equiv="Content-Type" c />
4 ^+ E- H5 T0 ~) _+ o
<title>css2.0 VS ie</title>
# V) z0 h }, J6 Z( ?5 _
<style type="text/css">
7 ] u5 V) F1 g
<!--
4 s/ e( U5 ^/ y! P7 ]/ W7 X
body {
B5 F2 G- u4 h5 P
font-size: 12px;
% l# n \7 ^$ `/ q. f" c. {
text-align: center;
4 S% U: `- t) V1 k
margin: 0px;
q- l8 b( i$ n+ i: ?/ t
padding: 0px;
% J4 W5 v% C2 x9 G" v
}
3 S6 X/ G7 E8 Z* H
#pic{
( r" j) }8 N& Y
margin:0 auto;
" |7 j1 p- k& A6 X: q, S
width:800px;
3 y6 e! F( O& A7 J0 H1 b/ l
padding:0;
' ~6 X6 G6 S! K* z
border:1px solid #333;
. q/ ?6 X" r0 ^! h
}
2 J- i2 D+ L' |3 ]" X. t! L
#pic img{
1 C! W/ [7 `; a0 a; x$ K/ z
max-width:780px;
s, g- W- W( `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 F6 Y2 \ ~0 Q, F& [: `6 f
border:1px dashed #000;
* Q+ F" F& t2 {
}
, j3 O' D F d8 C( T/ [: g
-->
7 w/ X: a3 b" Y* P& c( \: X
</style>
- z) ?9 I8 c1 }, X% ]& q- @
</head>
9 X) q. R* n5 r
<body>
& _8 U3 b( t' D8 K' O5 U; H t0 w
<div id="pic">
$ R4 c0 s l! A# ~% @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 s3 p/ Q6 g F$ @+ q
</div>
- Z5 u7 Y5 r, C( [$ R$ W$ L0 ~# \
</body>
% w! {# g/ Q# d0 R% X: ?; \
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
