标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* ^3 u0 K/ g. B" V
关键在于：max-width:780px;以及下面那行。
& v r6 g! F0 b2 g7 S, m
固定像素适应:
6 I% K7 P1 Q8 s$ C, P6 x! P- @
' r* I* ~% C' @! s& a' P* F6 s
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> 以下是引用片段：
& ~, h% f. L! b" f6 h3 _- l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ z5 p+ C8 I' `+ U5 M
<html xmlns="http://www.w3.org/1999/xhtml";>
$ {1 k3 z1 C4 K
<head>
* E% `. A' t1 P+ T2 R$ c, |
<meta http-equiv="Content-Type" c />
2 N# t! \) D& ~# x' K* @- ^2 q
<title>css2.0 VS ie</title>
8 k- |* X$ [1 O+ w4 [( F# ^0 j
<style type="text/css">
6 w: [1 g1 a/ W' p+ s
<!--
, H" S9 Q" P; Y4 X; x& u
body {
& i) B% a! d$ h
font-size: 12px;
3 D; L' A6 C9 x; o2 d3 M
text-align: center;
+ _2 k( y" M D/ _
margin: 0px;
( Y& ]2 M" \) i) S& Q
padding: 0px;
# x6 D& S/ A7 k: n; ?. Z
}
. n+ v7 W% G+ T2 ~% W
#pic{
: B& k. X+ T* a8 D. b
margin:0 auto;
: j: U, B6 \( |
width:800px;
% s/ d4 Q# ?. |1 `# Q% l
padding:0;
: U9 Y* y& d3 W( D
border:1px solid #333;
* ^9 Y3 G0 D9 K3 W0 O$ H! j8 q8 t
}
3 S4 C1 J4 c" b- v7 a8 h. X
#pic img{
5 X4 M# \5 h' t- h" t
max-width:780px;
; P6 l# ~. z+ s: N( B
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* I" O- J9 W- |* q: p; o
border:1px dashed #000;
; a/ r8 }) X( q S4 U" E7 n& p! P/ f
}
( ^; v) z3 M6 o0 M! {3 \
-->
+ h/ S% e% }; ` S
</style>
e2 ^+ c: J9 w2 [1 Z2 F
</head>
3 w! u; I) h: p
<body>
/ y T; d& j! @( G7 P# f4 _
<div id="pic">
4 H' L( @$ I, M
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ q; Y" a1 n- l( N* Y
</div>
! {& u7 w$ Q* m3 [; Q1 l1 r6 Z
</body>
- ^6 k% W, m% B4 S, n$ d
</html>
# |# W5 L! z( E0 m) u* Q# A
5 Z' D0 `/ x7 B0 ~4 J6 ^0 `3 G6 ]
百分比适应:
8 Y. A% X% R% O! g
以下是引用片段：
, K3 l9 M" }; C) [$ L( E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% z; L" a: n7 z5 d j# Y: y
<html xmlns="http://www.w3.org/1999/xhtml";>
- I& a9 s T- i$ K
<head>
& Q6 s) C, m, i, i& H5 j! R5 o" h
<meta http-equiv="Content-Type" c />
, {! U Y5 W6 N$ `- I
<title>css2.0 VS ie</title>
$ ~. q3 [! `* h* n, p, q s
<style type="text/css">
9 {3 b5 Z3 o+ C* j; r$ J
<!--
p5 y+ w8 _$ C" C. i0 \2 Y! x
body {
* V: e) ]+ z r# J7 N
font-size: 12px;
5 ?( p( l/ @( b. b
text-align: center;
; e3 \! [6 n' J' F3 z, I
margin: 0px;
1 Q! Y6 Z! r& @% E; A: Q d
padding: 0px;
% W! E; Y6 h4 T1 O' `. u9 O
}
3 l$ h" {2 T9 T& d# w- N
#pic{
4 q* f; m( }. t* ~9 b# c" ]
margin:0 auto;
5 w/ z1 R# F: \) B8 }; r F
width:800px;
3 S% G1 p3 K& F5 C, s" V
padding:0;
N7 p- `% X# _2 m$ L8 F& b7 n
border:1px solid #333;
$ i3 p! w$ F- P. w- @% g+ Z1 V7 L# g% ~6 A
}
9 X$ @* T" |* P5 \' C) R" X
#pic img{
/ b% c4 u8 H# f# F; F
max-width:780px;
6 z* m3 a4 z& _7 k+ c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( c3 M# Y8 ~8 h& `& z* I
border:1px dashed #000;
: |" ~- L7 z# v, _' T& o
}
* t9 z/ C' p% ]& g( a+ L: P
-->
+ S9 |9 F n% `) V: z
</style>
4 C* W" v7 u& \, o' N
</head>
) |- ^! [$ w$ \' J3 a# P; \( u) m
<body>
4 s! @9 k4 ~. V# s' X8 j
<div id="pic">
+ `: `# _( M: t: t% z. Q9 Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% d5 c* U; _' J7 U. u/ K
</div>
3 n6 g. H( i) r! K% ^
</body>
2 R6 z3 B+ Q/ }: M
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
