标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 z t7 x4 e* E9 w F
关键在于：max-width:780px;以及下面那行。
. B4 j! `3 e u8 d% r4 a: W
固定像素适应:
+ B9 T. @6 h8 t) i4 m& b9 e1 |2 J. r
5 [" q* T9 \. Q
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> 以下是引用片段：
9 Z2 ^: {0 v3 [& F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) h" u P O" Z
<html xmlns="http://www.w3.org/1999/xhtml";>
U5 {* G7 T0 P* b+ N
<head>
4 Z, y; I: b8 D; x9 t: U3 x6 r: \
<meta http-equiv="Content-Type" c />
! P! ]6 X! }; b5 |5 q: |; N
<title>css2.0 VS ie</title>
- L' t- l: J, [) o) O2 J
<style type="text/css">
# L- P s0 p8 y& J$ ^5 O
<!--
0 \7 J. E3 ^7 O- K. V: Y
body {
0 z. s+ S. ]0 T) `' D D* T# b: i
font-size: 12px;
$ [( |1 e7 d3 y- T
text-align: center;
! n0 a6 p, C. T2 T: D u' L
margin: 0px;
+ l5 U2 H( a( m* d- f) y3 a* F
padding: 0px;
5 N* v7 M# l: J% o5 |1 r
}
, [% y1 ^7 P/ c0 J- t8 e2 ^$ r+ e
#pic{
" }/ G% j, f$ J0 G
margin:0 auto;
8 W' L8 e* L, d
width:800px;
' e6 F! F" P# e) m
padding:0;
: s8 S' x* x8 H/ M9 ]& u
border:1px solid #333;
% Y' k2 l7 ]5 a; |1 T4 c& i4 K
}
+ a6 s" G4 f7 g' x& L
#pic img{
9 j/ b* M# L/ h" v* o3 ~1 S; Z
max-width:780px;
8 V! r8 K& w+ V0 g& G6 f2 X
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- B* S: W7 s. i: I! a
border:1px dashed #000;
+ B! @$ }$ q& z
}
m& g- h! V# X$ T- R9 h
-->
6 m, A7 X! k1 Q @# [) |' V
</style>
- b, F( `, w. m/ \
</head>
( s8 Q& W N; p: \7 F9 ~3 U) A
<body>
. z y5 h& E8 J! ~
<div id="pic">
" X+ c! D. L! w; C# R7 `
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 Y" g& l5 A3 m4 J" A8 e
</div>
; S( m4 X; \" B! l3 W
</body>
9 x+ d& A0 W: j" [
</html>
0 {# h; j) r# r1 v! B
$ h" G. o" }0 d* Q: G& E
百分比适应:
( T# ~8 h, G9 e3 Q4 ?- N
以下是引用片段：
0 ?2 O7 v: Y9 }3 X& q/ ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: N& `* a) O- u5 \
<html xmlns="http://www.w3.org/1999/xhtml";>
# d6 a" n: C$ \' U- M
<head>
6 p# Z7 E5 X% _$ V. z: C8 E2 A7 L
<meta http-equiv="Content-Type" c />
/ w V" a6 f9 g: {! I# @% x5 `
<title>css2.0 VS ie</title>
5 ~2 K7 D% _% z( X
<style type="text/css">
9 B _9 N) z- H! {
<!--
?* p1 {9 V6 x; F) b
body {
# h9 p6 m5 L' X& C
font-size: 12px;
0 x" h5 j' \7 q
text-align: center;
$ c# u; }! a0 c2 d' q4 ^
margin: 0px;
# u# p5 h7 Y1 W
padding: 0px;
H& {8 h, J# i9 [7 w; q
}
& a, }& e" Z3 w! C9 v+ [% }+ g- @
#pic{
4 g% c/ O( @" `3 `8 _' s. y
margin:0 auto;
0 \8 E( Z. K# S$ s5 Z
width:800px;
3 D& A. v2 U2 V* [6 K. \" K
padding:0;
) F7 p2 ~* Z2 o. T. w6 [
border:1px solid #333;
* {9 j5 d7 N) k& U
}
2 k( u! [; f7 F. ^" d% @
#pic img{
# J+ E9 e$ Y+ R4 J. \4 g5 J
max-width:780px;
6 N7 S. _$ }% E1 s- L. M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* I: I& e& S1 u/ \0 r* e
border:1px dashed #000;
& a9 J7 _. D% p" |% o I9 H: o3 J* S
}
; p5 m( d! J4 o
-->
4 M G; ]6 ?3 O8 |' l/ S$ c
</style>
5 D2 `& t: d" [8 \0 _
</head>
" r4 A! h8 G3 Q$ E0 l" y/ a+ A0 h
<body>
0 Z) [! _( C4 j5 _. w4 u
<div id="pic">
8 T2 M$ } o; y' ~1 h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. K5 L8 |7 K# @/ D
</div>
! b& h2 o# I4 M$ P) ~& l2 n
</body>
% M8 M! Z* m8 l% A% N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
