标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! Q! b5 ]6 T) b3 K0 a
关键在于：max-width:780px;以及下面那行。
- s$ [! J4 F0 C4 M
固定像素适应:
; b) u/ @+ h. ]0 w. N
/ X( u# R& E( P0 | ~
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> 以下是引用片段：
3 H. i0 r, p3 e' P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" Y, X- z6 y. ^, N* }- J, s* @
<html xmlns="http://www.w3.org/1999/xhtml";>
8 ?! P: X% s4 ]0 Y" X7 E
<head>
4 Q2 M" K( b- `! y3 w6 x7 c5 m
<meta http-equiv="Content-Type" c />
[& l; ?; T4 Z% L7 b8 }' U7 {6 c' l, U7 P
<title>css2.0 VS ie</title>
2 K4 ~: S( x1 s! r) G4 W
<style type="text/css">
6 H. w. x& U" }# K3 @# S3 R/ s
<!--
9 e5 d0 m8 B1 Q
body {
: M: m+ I' E; Z9 O5 }' _! G8 ~4 O
font-size: 12px;
3 ]- @1 P3 W4 b& }8 m. B- C4 c
text-align: center;
( L1 l& a& W" t* \8 d
margin: 0px;
9 |9 i! [2 d. A
padding: 0px;
% ?, F' ~7 L. \3 H
}
, U& g3 X( r7 I2 c: |/ t# P
#pic{
2 j# Z$ d, q. h" P. ]
margin:0 auto;
2 {# L. e8 q* d! e4 k$ v
width:800px;
C3 q" }! O, g. R# F- n4 s( W2 `
padding:0;
5 V( H. s3 D! F4 T
border:1px solid #333;
' z! `5 Y$ G8 k
}
O. j' k, G: {4 z
#pic img{
9 @# Q y' R% ]# @4 G! H5 q
max-width:780px;
0 O _/ j4 _% Q r
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: ~+ v4 t; ?5 K, O
border:1px dashed #000;
$ c- w M# A; N0 w6 T% r" a$ r; B
}
1 ]6 P- f+ m4 l' a+ H
-->
" R+ E. [0 P" D
</style>
# o7 z: b+ I* D9 p# i; t$ X
</head>
2 ~- f1 w6 {: [
<body>
3 G: j/ e) ^5 ~2 c. ?6 i* x5 N
<div id="pic">
9 _- u* d# j' ~! Z) M, ]) N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* u( u, z; p2 S+ g- ]/ H" }/ u
</div>
, C( Y# N6 X. o6 ~+ k: i
</body>
( |' h) h) d- K& {, t
</html>
) k1 @! d1 L/ h6 I
, T9 x" m O6 \/ P
百分比适应:
: g& F+ x& o0 P v% j& ]( b
以下是引用片段：
: |. c, q6 Y: J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ }# F* J6 Z4 x8 f9 [& |: u
<html xmlns="http://www.w3.org/1999/xhtml";>
: T8 j; R; L: m0 e
<head>
; D+ H" L1 X$ h3 v
<meta http-equiv="Content-Type" c />
* n: s3 H: @8 h7 ?5 @+ b' b! k
<title>css2.0 VS ie</title>
9 R$ }1 k3 \) y0 P
<style type="text/css">
+ v9 a" ?( K. G% O k
<!--
& d& o9 v2 l5 x# s/ ^
body {
* s- r/ d$ q- `3 m+ g. G) i3 J7 ~
font-size: 12px;
6 Y+ n# ?9 O$ d7 o. W8 b
text-align: center;
0 [5 r. g. ~$ z. D' t, Z d% h0 L2 m
margin: 0px;
% S9 C" \+ n( r& k. ?2 j+ d- a
padding: 0px;
, L R1 ^, E% l' @8 t
}
; `6 B W$ @. |& A5 ^
#pic{
; ^0 N/ |: \0 L( D
margin:0 auto;
3 d- R, \. r5 H6 g8 R7 n
width:800px;
6 E6 f" ^& Z- H0 w
padding:0;
% c2 v4 ~" K5 I7 k. ~ W$ b
border:1px solid #333;
* } ^7 I' a! M
}
1 l5 \! E4 H+ F8 i' ], _1 O
#pic img{
% [# l x J0 ]3 h: C8 M2 |
max-width:780px;
" ~3 ~( |, O4 u" h$ D! m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: e+ H, [/ V* j" B* O
border:1px dashed #000;
! v, Y( D% _) u, s1 K
}
' a9 d1 n2 W/ C F# j
-->
! }+ ?; b! [8 p0 }; `
</style>
+ W4 s8 k# s7 Q' ^4 l
</head>
$ p. t* T9 n4 h2 y- w
<body>
! o% h7 [' p; U
<div id="pic">
+ ` c) F. ?+ d# y; ]# |$ l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* X! h( a5 L2 \9 v1 E1 o6 H: W& R
</div>
' e) o8 [/ @9 o! p0 j. x3 Y
</body>
8 V- ?2 T5 f' h8 N. c% e
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
