标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* o! J# V/ g2 h/ @4 h# Z+ Y
关键在于：max-width:780px;以及下面那行。
1 ? \6 h6 {' g1 c0 h* C
固定像素适应:
/ W9 o4 W W7 ^2 N1 a
) ]' z/ n8 X# n2 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> 以下是引用片段：
! C5 A" M$ y0 ]6 H0 n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) M/ c; l+ E4 H S- k" M
<html xmlns="http://www.w3.org/1999/xhtml";>
8 u. U7 p: E5 [' M. s4 S% V: F+ s/ k
<head>
( C# d! P& R u1 d `6 O
<meta http-equiv="Content-Type" c />
9 i5 s* ]& F: q: A+ g
<title>css2.0 VS ie</title>
3 k2 k5 G1 R1 ]' ^" P! q# w
<style type="text/css">
; N r# V9 _/ [( ~1 C# S* s1 b
<!--
7 l! o* O6 q' V- E
body {
\" U) d0 n2 c1 [
font-size: 12px;
9 ]" ^) a* c4 ^' C- l+ ^7 u
text-align: center;
, E6 x }( T2 {6 C4 v, w
margin: 0px;
- }! j; e/ n/ P! D
padding: 0px;
% S+ m+ z% Z) U* G2 w! G \, N
}
# M2 X& P5 r! ~
#pic{
" c' c& ^; Z) Q
margin:0 auto;
8 r$ a( Y+ a( g/ h! ~2 C
width:800px;
& y" r: Q0 j5 ]: o, @) a
padding:0;
8 K* k( M0 L/ X2 l
border:1px solid #333;
$ C$ }; b6 i: W
}
) y+ v$ |; _2 U2 Y8 n" V
#pic img{
1 I+ v' z. G t% L: F$ `
max-width:780px;
& x% n2 j+ W1 ]5 S) F
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( R9 n) W: A+ ?$ C: [# C
border:1px dashed #000;
+ F Q, I$ c( \+ `. `8 Z e/ T& }
}
: d; @0 G, J0 \* |. ~# f% ?7 n
-->
2 q2 L. p. t N$ y+ E; t6 o2 P9 ^+ Y, S
</style>
8 C1 `9 H$ t+ X
</head>
4 ^! p9 f) B, U$ {2 B
<body>
6 h1 T2 C- W f0 ?9 g
<div id="pic">
" }0 j: u& H- L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ Z1 t' |2 ]; h" T
</div>
7 L& i: ^) L& K% I3 A
</body>
* T2 d. V" O& f% V' X/ K- s$ U4 L
</html>
/ e) {) f; j, h. S; y
! _! P- ~- R0 f1 Q, q1 E
百分比适应:
1 H( i: w' M D r; C _
以下是引用片段：
3 G( t: [& @! v* ]+ f2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
_- V' v0 ~3 g5 J% H
<html xmlns="http://www.w3.org/1999/xhtml";>
+ R6 U9 E4 v* B7 a
<head>
3 R3 M2 u4 O t, Y
<meta http-equiv="Content-Type" c />
" @( U5 T- z% _6 ^
<title>css2.0 VS ie</title>
9 E6 Z, Q6 n: V5 b9 j
<style type="text/css">
V$ y/ p+ C$ H+ b! c
<!--
. V" g: o# Y" p
body {
4 J1 r- E# p" s* Y- F1 w
font-size: 12px;
; }2 T1 m/ ^% U/ L! P
text-align: center;
, E2 b D; l; [/ m0 ?: Y" u# p& }' V
margin: 0px;
5 h. F( i* e* q5 O3 g& ]
padding: 0px;
. Y9 {& a! Q$ c
}
3 _$ ~2 ]0 g2 ^" N
#pic{
1 z# b9 @. Z+ R, o! t& Z$ {
margin:0 auto;
8 s4 S( O( c/ z
width:800px;
# `7 o+ @0 q. i6 O- _( |7 x
padding:0;
8 Q8 g$ Z7 \ p* p6 ~* o+ y, Y1 H! s4 L
border:1px solid #333;
( B) K7 p; O+ T; [* i
}
! M( {$ \6 J; ?
#pic img{
& _$ s. O1 V) m$ s8 z. K. A+ o
max-width:780px;
5 ?% p$ N" R) O- [% e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 t+ |9 T+ x6 Z- h6 P' |
border:1px dashed #000;
& Q% [+ d7 z3 _4 J- Y; N
}
- V2 p" t0 K5 _5 n, S6 J' m. \
-->
8 A- I* O- S1 t P
</style>
, u7 _$ G1 y4 I- Z6 u
</head>
( J' X2 }5 M+ B5 ]$ M
<body>
& n# }5 O4 x/ a/ z5 f+ l3 o( L
<div id="pic">
( j) U! S9 U! z- d9 f/ {" t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
K5 \) D5 j& w$ ?! {
</div>
& w/ B- o$ t+ j8 m- A1 k
</body>
1 \5 u+ W+ O& |/ a
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
