标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* V* ?4 T: h) N% v. c9 W
关键在于：max-width:780px;以及下面那行。
0 W7 q; l) b; J/ Y
固定像素适应:
' |1 `! m7 Y$ X, A* n4 v u
0 w" s/ r: I% H; _
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> 以下是引用片段：
/ _4 X* U$ c) {+ U+ I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: e# f2 ^+ q* G/ z/ i
<html xmlns="http://www.w3.org/1999/xhtml";>
) q# Z2 z; X( p3 c2 U" |$ _
<head>
6 e# n+ X% q# x
<meta http-equiv="Content-Type" c />
$ j0 l; P5 s, R( f1 `8 e" S3 @
<title>css2.0 VS ie</title>
% ?3 g( A3 ?2 m" W! F4 g% W
<style type="text/css">
6 r, ?( W4 Q! W- ?3 h% A
<!--
; _: I9 s3 b$ P6 F7 N6 o$ z
body {
& w9 X5 e, f# D, a. H
font-size: 12px;
, p9 K2 r! U8 k6 W
text-align: center;
( X4 C5 J/ N3 `
margin: 0px;
/ h1 V6 m/ z1 w
padding: 0px;
' f) c. {0 x% n8 E+ t. x
}
7 \6 ^& H; d7 J6 t5 `/ c @
#pic{
' Z Y! M# P7 A/ h. P& Z5 v( x
margin:0 auto;
: h" f6 p4 Q5 `- V( N/ \; i8 z9 Q" w
width:800px;
( P% F: j- a: ]5 s, A
padding:0;
# E9 c t! m( o# K, ^! q
border:1px solid #333;
5 |3 s5 B8 \/ }: T! z' C
}
, E9 l7 N4 t* }5 R
#pic img{
9 V7 O/ A( ^$ E" ]# p
max-width:780px;
9 V% ^5 Z' J* h% Z: S, T! K
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: ?9 m. N0 |' P* L* u2 p2 ]- l
border:1px dashed #000;
2 e! F# N7 X* |2 h3 h) S( G: U
}
3 l8 ?6 d' D7 v. q4 J, ^
-->
# \/ r3 g, V- ^6 b) r+ O1 s
</style>
5 g' D$ G- s8 G/ n5 B
</head>
7 B9 F) m9 ]' T; y
<body>
1 }' Z8 R6 K. y- E1 @
<div id="pic">
' A) m, c, j' k7 d
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 E5 l3 N3 t0 i2 c9 W% W F
</div>
/ E0 ?: |4 H v6 P1 G
</body>
: C4 s$ M. a1 h7 L) a9 u
</html>
4 f# m% V0 c/ Y# K
0 [; K% A3 J4 ?# s' _; u2 e$ c9 A4 A
百分比适应:
/ c2 z+ `3 z' v- f9 R( ?
以下是引用片段：
1 U/ A7 _6 Y9 [. P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) R6 t" L/ r' s4 _- U/ A$ r$ x
<html xmlns="http://www.w3.org/1999/xhtml";>
9 @3 _( ^) ~3 j' v5 A6 V" F: ?
<head>
$ l+ e, Y$ E8 z* R) _. w
<meta http-equiv="Content-Type" c />
! z& T5 z! k4 |# J
<title>css2.0 VS ie</title>
4 S2 O$ W& X+ d# w2 m# k0 N
<style type="text/css">
: P1 f* J, \1 ^, _0 z5 G4 e
<!--
, Z9 c8 P. w d X Z5 A
body {
! [: D0 {0 f7 S, l" ^8 b; S
font-size: 12px;
7 b: s& X' b1 E
text-align: center;
. |4 M9 g& }& g2 X9 v" h
margin: 0px;
+ z) w& s6 ]& D% W1 h
padding: 0px;
1 [: X6 \5 o8 R+ X3 p Y/ U% y! i6 |3 ^( u/ w
}
9 i' D1 ]# e0 h5 x; X+ Y
#pic{
4 T' J! M. [; v) X
margin:0 auto;
7 |7 |" L0 R: v+ m2 ]5 _8 }
width:800px;
4 D3 s9 n0 j9 ?
padding:0;
0 F t$ x+ L" {+ o- L0 C7 Y7 y
border:1px solid #333;
2 d! e! S$ G% h1 q# d. K# ?2 @
}
0 n8 w: ?7 X# L
#pic img{
3 M0 n; G: E( b
max-width:780px;
! M' R# ?$ y* \1 J9 v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& A. u( C, ~8 q; Y/ e: A: n: }( {! p
border:1px dashed #000;
2 P6 I& X; N: ~* E* V6 F# Y
}
5 W' w0 p% b& n3 _: u) X
-->
' A& T/ z& B5 p
</style>
& @- k8 S: Q# N4 m. Q# r8 Q
</head>
1 u, U* ]1 i5 U' m
<body>
. Q6 Z- m- Z: \+ M
<div id="pic">
0 M' c& q |/ x/ P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 a' {# D* M# D+ x: }
</div>
) _# j" z( H; [7 ~. }
</body>
! m; n2 b+ j, J' Q% }8 G& v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
