标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, j6 M7 @5 w; S
关键在于：max-width:780px;以及下面那行。
@- `. f+ e0 m. D( ?& I
固定像素适应:
5 h8 E! J: K$ V( I
' G: e" h& r( y. {
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> 以下是引用片段：
: r. {4 F5 s8 G1 f/ X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# c Y5 c! X; Q5 {! x% R+ m# C
<html xmlns="http://www.w3.org/1999/xhtml";>
2 c5 ]5 Q% Z0 c$ G. K' e5 _
<head>
/ u9 x# K. }7 [1 r- k A
<meta http-equiv="Content-Type" c />
1 E; n0 H/ b# G. I4 C2 h7 C( E
<title>css2.0 VS ie</title>
- e/ o$ w1 g* C, @* q
<style type="text/css">
/ [$ k3 ~% g3 _: u# B
<!--
5 B5 n' g; }* B9 |3 w2 `
body {
' u3 l, t) u7 `/ @7 q: I
font-size: 12px;
7 J7 a1 I0 H% U& H) C
text-align: center;
& ^1 B; g# V f7 S1 C$ n
margin: 0px;
, c: r4 n$ f" d- ~ g% p
padding: 0px;
6 Y3 d% K8 x4 `) K6 ]. e
}
% P5 R# c; l% o, X
#pic{
/ F4 @) C7 v' H. A
margin:0 auto;
" Y2 N" K5 C4 ], }6 |
width:800px;
/ s1 ?% e3 [1 K# a
padding:0;
9 C# Y6 s+ s4 E0 K5 g( Y& C( x9 _! W
border:1px solid #333;
/ ~9 J/ Z) J8 K D& r" z
}
. x7 M& _' N W: x$ J0 m
#pic img{
* b4 i7 e. \8 }# F
max-width:780px;
$ C2 e, E. I& {3 i1 Z9 _2 E7 q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' C) Y# c1 v, l. _5 T% d$ w
border:1px dashed #000;
' j0 _& ^% r" ~& O* Q) U) x1 s; j
}
. D% g* q% x. o1 {1 k
-->
" T" L ]" \9 O
</style>
* {# u* @' S: _: Q, T6 C$ p, |7 U7 @+ C
</head>
6 V" }9 g0 m( ~+ c4 ?8 ^" r
<body>
( a7 q z) C& [
<div id="pic">
" ?/ m; L4 B' y% c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 c: C p4 T! i& d- l8 N& X/ T
</div>
9 ?- M* {5 L* w
</body>
$ A6 ~3 h& M6 t" w# c7 o
</html>
) x! b; y }7 _) k: Q
. s. H' u' a* V! d3 F5 ?7 h0 W
百分比适应:
! l3 c; A9 p! S2 b8 K4 R A
以下是引用片段：
6 r5 v* B1 t$ a% P5 w, G& L- x& A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! i/ F" m: U @; v9 O1 [
<html xmlns="http://www.w3.org/1999/xhtml";>
W" O) m" Z Q) |6 s
<head>
2 q$ r# i: U. X- }, r! P
<meta http-equiv="Content-Type" c />
2 A# H: [/ O# }! f9 S" j1 V) o5 Q5 D
<title>css2.0 VS ie</title>
: U# c: g/ j- B+ K/ y4 P
<style type="text/css">
4 L/ ^1 D; W, R) [: s* v: F
<!--
- z+ c7 v: f* L D
body {
: t' H4 ~5 I8 {/ ?& C
font-size: 12px;
5 _: g0 U% W& E! {; K1 d
text-align: center;
2 q0 i1 A6 {/ J6 d( ~- c; v
margin: 0px;
$ @0 g5 ^( k+ _- G, E2 Q/ q
padding: 0px;
1 }' n1 j+ e3 n: _; Q, S# `
}
! W7 y* g- j, f
#pic{
/ Y$ d f! m) b% C9 o6 S
margin:0 auto;
0 B! g7 w8 p- D e# @9 x* z
width:800px;
% x c+ L1 a9 `( k
padding:0;
# K, r6 s) T0 }' D2 I
border:1px solid #333;
( |& a2 r! q& }4 o/ Q) a
}
0 I7 q) i4 S" `+ t/ ^
#pic img{
$ l; q5 O9 H# E& r. e8 z/ X1 I
max-width:780px;
5 h, l2 m: V4 m/ m* ^: q M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 b6 ?( D) Q- n4 u" f( z6 }
border:1px dashed #000;
5 @+ {* M+ Y/ {0 P4 o. ?. D9 g- V
}
: q3 G6 l, O L Z# c7 w" q* Q
-->
s6 S# x+ p. R. _
</style>
9 I- `3 r3 x7 O+ {. O6 o
</head>
8 r) B0 O2 R' j3 x. X
<body>
; ]' l3 ^ _$ M0 m& H
<div id="pic">
4 j) F6 }' z4 ], k4 T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; N( s+ }2 r" k
</div>
& }8 M' O/ [0 R0 A j* ]
</body>
4 ~! Q$ V9 w3 G0 z8 o+ ~
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
