标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 U) l+ k( W% o3 I% o5 l" H, a
关键在于：max-width:780px;以及下面那行。
+ A ^$ K) z* d6 Y
固定像素适应:
" i X% ]& P1 c" P
. O( t; ]+ v' Y0 F& D1 @
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> 以下是引用片段：
" I0 I2 p& k# t/ p2 |+ X3 c( E# C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 Q- T* M6 O* L
<html xmlns="http://www.w3.org/1999/xhtml";>
% z# A. O/ q" w4 ]9 h I+ J
<head>
: t" U, v8 I1 t
<meta http-equiv="Content-Type" c />
1 l" U. W1 \3 n4 A) x( p
<title>css2.0 VS ie</title>
: }. u! Q) _5 `+ z6 L
<style type="text/css">
! W4 y2 k7 t2 b2 @5 ]5 q
<!--
- c9 b8 z4 }- {, z7 }
body {
! K8 o& R, z- u) W( {
font-size: 12px;
, p9 e6 S% D% t6 T% }
text-align: center;
* A7 W4 t* I* q* o/ }/ r
margin: 0px;
. C/ }" Y2 { {( w. ?1 D
padding: 0px;
; h4 i) e( q( R& d' n" o. [
}
1 Z% T8 R: e+ \9 }, F# R
#pic{
2 n) I) h3 y% d5 ^ C
margin:0 auto;
& I5 [9 s* |0 o
width:800px;
3 b9 l3 ~" A# N- c
padding:0;
( b* L/ @+ a& L2 j1 y5 `! r8 ~
border:1px solid #333;
) f: q; {( J8 d) e5 v
}
& g& t. |0 B8 N# d3 q
#pic img{
7 I9 ~* @0 l4 |* [$ ^) M3 _" p7 |2 M% M
max-width:780px;
0 q; h8 Z5 p7 o. \/ C6 @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, C* \ |7 R' y8 T: D: d
border:1px dashed #000;
# P/ |6 ^) x, I! g2 ]) C- ^5 x
}
H D8 M1 |7 {% t
-->
5 T5 p$ @% D S0 k0 Z ?" f, J4 `
</style>
5 C# D/ e0 t' I, K0 @
</head>
2 C- [% }9 a3 b. G- J7 \) B
<body>
, z! L# ?" L7 }4 @# h
<div id="pic">
( K _" P6 v; Y4 ]
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 J' a. U2 L3 I* n
</div>
S7 o# [+ f$ E+ f2 s: z! [9 n& c
</body>
! u0 F& R6 i: y# `9 Q0 t
</html>
$ x; Q9 F' c( D0 z) h# g; S
/ E0 O) ~) w) g, `; K
百分比适应:
% S: q$ R! ]: }9 Q; _( M+ y+ A: I
以下是引用片段：
3 ?$ d/ G2 P) n% ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. S: Y# s( ^2 a& u3 A
<html xmlns="http://www.w3.org/1999/xhtml";>
2 A8 ?$ d6 K. |1 A+ E3 S: M& A
<head>
; W8 z- [( P) J# \
<meta http-equiv="Content-Type" c />
) N1 H, z, r; r& U. ?% o
<title>css2.0 VS ie</title>
' e8 C ~+ I& }5 E( w5 j8 i2 Q
<style type="text/css">
9 `' H! u* y$ w% P0 n
<!--
8 H8 u5 z- t! g
body {
! `4 w1 I7 ?7 F+ z; O
font-size: 12px;
$ n- n8 @, u @
text-align: center;
8 J# a; W5 a) c/ `3 I6 P! T. }1 b
margin: 0px;
6 f# a, C" [# z
padding: 0px;
& q7 D( }) l4 q! q+ z# S, }
}
! ~& e6 c. Z/ }* z% A
#pic{
, B; k0 W0 [7 S- I7 f) @1 b* N
margin:0 auto;
& _( i p- w' s! N- T a P
width:800px;
! f7 K, b# d& L$ E
padding:0;
1 W3 |* O! i) H) H) j
border:1px solid #333;
7 s1 Y% q! P/ E1 ?! H5 u5 e
}
! {' y O; Y8 R- @
#pic img{
1 K) F% r$ {5 R+ w" a* H) V
max-width:780px;
4 c+ Y. U5 _: v9 T1 f( Q: X4 }, Z, \
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& g& x$ \/ U5 f0 [- ?8 k
border:1px dashed #000;
* [# y2 h9 D" l& q5 H/ O. K
}
- a$ g& m4 f5 ]9 Q" c# c$ I/ w- {
-->
) q7 e3 y4 c4 g: H( {
</style>
. o6 ^' X s/ x
</head>
. {& R& L4 i/ L( r
<body>
4 l$ \ g$ K: f0 B8 E
<div id="pic">
/ V4 t! m3 w- L3 ~: p5 y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- K3 G0 y G! ~! j
</div>
' k( [7 {4 L0 Z; b: y
</body>
1 v6 s: J" z. v8 o
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
