标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# x8 _% [" r7 f* j+ R
关键在于：max-width:780px;以及下面那行。
" v' U+ u2 k; d3 G% g# F
固定像素适应:
% |1 G+ j+ {' R( G3 c9 i
5 h" _/ w ~; n4 ~
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> 以下是引用片段：
8 t1 v- Y8 N- _% O3 H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# V2 t5 Q4 C0 R# ~0 z R% g
<html xmlns="http://www.w3.org/1999/xhtml";>
2 F/ O5 k' r" l' O: W4 h. z
<head>
% x6 D ^# Z1 Z7 e% `9 c! a4 i1 i
<meta http-equiv="Content-Type" c />
/ l4 a+ S1 j& c }
<title>css2.0 VS ie</title>
8 c8 D' }8 B r2 J9 P
<style type="text/css">
6 l, O# t" f# E( j( Y
<!--
2 A8 Q8 p7 X. Y5 Z! B! p/ u7 V, P
body {
* P' n5 Y# _/ P3 @! [, ?
font-size: 12px;
; a, M# c" Z! m, d* M0 J% O
text-align: center;
/ Z6 _2 H; N$ ?& m
margin: 0px;
/ N; D% [( s8 _6 J, z
padding: 0px;
) T" h- V1 p# \7 N$ \( m
}
* P, L ~8 W3 j3 }% P) K
#pic{
- O& o- l9 D1 v7 `) h% u, B7 k
margin:0 auto;
' x }& Y) l) K8 B
width:800px;
/ T0 ?" x$ g! v, t! P3 M
padding:0;
* ]* m1 A" b( ]! X/ l! I! S
border:1px solid #333;
1 b ~2 `3 H: t+ T; x) |5 r
}
, T. W3 Z; w. c* j- C' p$ U- I
#pic img{
* V4 Q1 Y/ {9 Z
max-width:780px;
& n7 O+ y: r# J" ?' x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, z- W/ L: I+ A/ w
border:1px dashed #000;
8 b- [( P& X9 x: f8 q& ~; D1 d
}
* {1 C9 W2 Q! f
-->
; ]% ~ @( h* U1 s
</style>
" D2 E1 S( p: C& @& g q
</head>
% \# k" p; s0 ?
<body>
2 R4 f) s2 |! `6 l! H$ A( m, p; @
<div id="pic">
# h4 x$ ^, q9 g1 d
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
]0 d" L* b/ u3 i" S1 C
</div>
& f( P8 e" M, e' r
</body>
: o1 f& s V- L/ F/ K. s, Q; v* z; y$ Z
</html>
) u1 \5 { J7 O: `+ M8 c
6 O3 {/ m' K5 q
百分比适应:
3 E2 }( ~1 i9 D: k
以下是引用片段：
# J( \, V9 g; b4 }4 Y5 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; v9 X3 c0 R$ M! e5 r9 s* f
<html xmlns="http://www.w3.org/1999/xhtml";>
. x Y K) ^5 [. Y/ v3 p" A
<head>
4 ~; x; M/ n0 F4 U! W
<meta http-equiv="Content-Type" c />
' T" _3 _# o- J* I
<title>css2.0 VS ie</title>
3 D7 \4 V# q; X6 E" f8 m
<style type="text/css">
4 d9 @' Q+ o) j5 M- p
<!--
8 x& q( h+ u; ]# {# K- W4 Q
body {
8 g4 U: ?/ ?. ?* l1 D
font-size: 12px;
9 [& v- z: q) C! _9 K; [
text-align: center;
8 I3 m% `0 S# ^/ S; S2 y
margin: 0px;
: H6 W) X; ~0 W$ m
padding: 0px;
; u- A4 I5 ^; a' W Y+ x9 A: c
}
2 I6 t' d y* b1 Z2 S
#pic{
& w* G- g1 P2 a7 P5 W
margin:0 auto;
$ E; [! r/ |. r5 q" J4 \
width:800px;
5 w( h1 b' _) O: e+ ~; E' a
padding:0;
2 L$ r7 y) s6 i
border:1px solid #333;
, h; i9 n Y3 D
}
" c1 |3 y! u0 D2 M& ~5 y4 m) g
#pic img{
3 W7 ^5 j1 R/ q
max-width:780px;
4 J' R( a1 o! g! Z( d9 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" X: ?& U3 L5 u, d4 i( ?
border:1px dashed #000;
' J2 e( P2 q0 G# f# m
}
$ W0 a: t: |0 u
-->
) y5 B5 C2 z8 w k
</style>
" } B o. R0 U
</head>
; l6 q# V8 v- ]4 Y
<body>
) R* x3 @5 K7 u9 A* K
<div id="pic">
3 r% V* H- M' D' ?: x& j; Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 c9 I6 S3 Z: v
</div>
; |- Y5 I' W! A: n, V
</body>
& ~4 F3 a, m" z
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
