标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 C. L% S' I( G6 ?( Q
关键在于：max-width:780px;以及下面那行。
4 z; B* \8 i1 j
固定像素适应:
; B3 G$ |7 O* c6 d; T7 L; }; v
( |# q' W8 l0 e& f3 S4 l1 d
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> 以下是引用片段：
C5 w2 h, _* C [/ U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 v3 X& ~+ n2 K3 P- w6 b
<html xmlns="http://www.w3.org/1999/xhtml";>
+ W" ]! X u, w/ K
<head>
: J) q O2 z5 ^, `8 m% I+ m
<meta http-equiv="Content-Type" c />
4 E" ]8 ]: M4 F
<title>css2.0 VS ie</title>
% b" f! ?7 z( A- L8 X
<style type="text/css">
$ R7 n' A. N2 ]2 ~
<!--
) [# W) e# C* E: Q0 l8 |
body {
5 W. [/ o; @; w1 E9 ]8 Z5 ~
font-size: 12px;
+ {5 W7 L: U7 j+ _
text-align: center;
+ `6 I; P& i7 {/ X
margin: 0px;
8 @! e ?. y0 n6 S4 q$ B" }; ^. w
padding: 0px;
3 H+ l/ B W( g3 }% Z% w2 |
}
3 T7 A, i0 F }- f2 w1 t
#pic{
5 y1 K) P* `4 `6 D+ h: p& C
margin:0 auto;
; v* T7 N- i! F. f
width:800px;
* L7 }7 n7 q, T0 a
padding:0;
0 ^. z0 z5 r- ~0 D
border:1px solid #333;
& A: P% S$ h( R, Q" @" t8 o
}
+ g: R( h$ o) w; b2 Z- ^- ~
#pic img{
% _! t7 I5 w; W/ H5 q
max-width:780px;
+ h, Z% x- p9 @# j" t# k
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& w( ]9 x1 W4 C! J }* }; ]! @
border:1px dashed #000;
9 S' Q2 |" N5 R
}
1 Y$ p4 h7 ]' s3 @9 M7 X- D
-->
1 p8 B7 t" c6 s1 g& L
</style>
o3 x" ?% c" b; Y* G. }
</head>
! a& A6 I Y* W0 y( M7 |) F! c
<body>
- g F- r7 J1 s& ]( h
<div id="pic">
8 `/ L9 z% N( K9 l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" U" p7 G( o; G2 l- K! \. [+ r& x
</div>
, {. [4 r7 q! A. V( D! y7 i
</body>
2 l7 N: S" D4 N9 a
</html>
( X. Y: q( f/ j8 g$ E: w
+ L7 z2 w K- D( p+ a
百分比适应:
/ G) _: c0 {" z) h0 o, W
以下是引用片段：
1 x- r( Q8 T0 m# i5 V1 {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( E: n. M9 i8 ]! S8 [. z
<html xmlns="http://www.w3.org/1999/xhtml";>
! e9 C% B) k% r# _6 _9 M% I
<head>
. w9 @2 J/ u2 B S+ }; ^* R
<meta http-equiv="Content-Type" c />
( O e# t! k' ~, ^' G2 N; F9 l; l
<title>css2.0 VS ie</title>
' y. J: T2 w8 X6 a G0 Q s
<style type="text/css">
6 q! }9 e# ^; \2 T0 y
<!--
8 g4 j `2 L& A" q6 n+ V: X& B
body {
0 G3 S6 Z, m+ f/ _
font-size: 12px;
, V" L2 B. D c6 S
text-align: center;
, b: l% k& k; G! F' t, o' e; R# d
margin: 0px;
( v3 V7 b5 I+ B
padding: 0px;
) _7 O. \0 ^ U3 Q2 e
}
! m* \# `, B/ i W
#pic{
) b. i7 s& f! |: S8 H3 u
margin:0 auto;
: ^: I2 q) b' G2 J A. ~
width:800px;
) n7 o" c* y/ y* r4 u1 a* B
padding:0;
/ x" Z6 C- Z: y( J% a% A
border:1px solid #333;
( F H/ _$ H0 o
}
: y0 ]5 H9 @# i# I
#pic img{
/ j! e% F0 ^( p% q; J& A" k u9 D
max-width:780px;
4 G5 T0 l9 p* ~4 v4 Z3 P2 t: D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: M, {/ B( A! v! [
border:1px dashed #000;
) Y7 L d9 v P/ o- f+ {; K; e
}
& h, p) j# ]2 y( |. r
-->
D0 `2 D( x }* ]
</style>
4 k4 j' W% x9 P0 w" ]2 v# Y
</head>
2 j8 U* h$ l& g$ }2 S
<body>
# u4 j7 b _) R4 w& b/ r
<div id="pic">
; f y0 E- ]: L* j6 h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& T. ~# e8 Y# K7 K
</div>
$ C7 t& s! Z: d3 g+ P# Z/ j
</body>
7 q% Y+ }; z# m7 {1 ?3 |: k
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
