标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- M% Y" a5 Q5 t9 L3 j
关键在于：max-width:780px;以及下面那行。
* b4 m9 P0 |) r$ y( _, S
固定像素适应:
) S: q* x! J/ i4 C- Z
) P, m# k) j3 C0 N8 C5 V
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> 以下是引用片段：
. w* r J7 K% c6 p" }0 D; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 ]* O0 ?5 t# B7 U5 V" Z
<html xmlns="http://www.w3.org/1999/xhtml";>
5 I7 J4 M3 Z4 V* ^. ?5 M9 f
<head>
0 f' F! j1 J' j: r: J: ^4 ^
<meta http-equiv="Content-Type" c />
2 h: m5 A* M3 t+ m P! h
<title>css2.0 VS ie</title>
" U) a4 H# U7 a2 `; [: y0 g& T; R
<style type="text/css">
- j2 K( P! n2 @1 z3 _1 \- x( U
<!--
& k6 V q- o" F6 R% k! P4 i5 B
body {
0 [ d$ v7 d ^
font-size: 12px;
- L6 J: F E0 P; N1 c
text-align: center;
9 b1 ?7 F" L! M5 O, C! g- p
margin: 0px;
5 v; j0 |% K* W: L' f6 c/ |
padding: 0px;
% m4 L$ M# q& [( t" f. Z `
}
P' J! ^- g) @ \ K* p
#pic{
4 z/ q! M$ b9 J9 z0 f. y0 k! G% ?
margin:0 auto;
) h' c! `7 }. z( e" d( i
width:800px;
^8 y$ i' ~- a9 F7 _
padding:0;
2 R$ _+ Q) ?5 i6 b2 o. S" y
border:1px solid #333;
- r! g& e. n& Z
}
+ J# b" [9 a/ m) J+ M1 E+ n
#pic img{
& L0 o. O! s" d! s
max-width:780px;
; [3 Y9 W$ j3 g5 `. }! _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 W2 z/ p& y. z4 v4 G' u& _& M
border:1px dashed #000;
' X8 m; @9 J" q, v- M0 ]7 q z
}
% D5 e# K( j% d) X$ m, B" L
-->
2 w1 Z" z1 q3 W
</style>
/ U7 s& c1 R( ^& p: e
</head>
1 K. o/ j) M* q0 ?1 G7 K
<body>
T7 E! Y; E2 F* H$ g2 W: l+ H
<div id="pic">
- S t* g R* J$ ?; Q) P( z; _# e$ G4 ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. A! K2 B$ z/ \1 G" |% w
</div>
+ u! z. Y9 Q5 ~
</body>
# _: g0 x, e( M; ]
</html>
3 w7 ?6 M( k- Q. H; Q% E
; u( J5 q. z$ h3 W. d
百分比适应:
: \6 H, t; r" Y5 d( V9 y3 N
以下是引用片段：
/ Q3 U |. V z& H9 a- E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ U3 C4 o+ i% Z7 Z
<html xmlns="http://www.w3.org/1999/xhtml";>
1 w M% _% \8 l& ^3 ^; W
<head>
2 ^5 s0 p0 j/ F; m* c8 X( Q" k
<meta http-equiv="Content-Type" c />
$ h# X) P/ b. H* y4 D
<title>css2.0 VS ie</title>
8 Q2 c- R0 H" F4 |" L
<style type="text/css">
. W* B# a0 h" E/ @$ x, f
<!--
# V& @: `$ b. g1 Z: W U3 [
body {
6 T: X- e9 g4 V8 {$ V$ C8 |
font-size: 12px;
' ^4 _4 q& I9 ]4 B3 ?. Z% U& O
text-align: center;
6 x$ u0 K/ ~. i2 `) @: w* D! ~
margin: 0px;
3 U, [& S" B( b. N8 B8 F( Q
padding: 0px;
# ]+ t. \2 W# Y9 ]5 n6 J$ s9 _
}
5 p5 W* ^% z4 ]8 u) j
#pic{
: n3 U! ?4 }5 I
margin:0 auto;
. n2 f; c* f; [* w: L# X
width:800px;
1 N' j' l7 S5 Y a$ x/ d! u# A. K
padding:0;
7 |( `% ]+ s: B' A
border:1px solid #333;
4 m. q! l! D2 b
}
0 K* E7 I" K3 ]6 w, F5 j; n2 U
#pic img{
) C, K" _9 y/ I7 E3 x/ m' [4 \: k# I
max-width:780px;
: y/ F: m" N. O/ L5 B7 o% r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) K3 X4 h/ `7 E! q7 x
border:1px dashed #000;
& K9 T0 E! f+ H4 Z& s7 r& j- J
}
" ^2 m( G' s' b
-->
; N- ]( Q' L* l" s% G3 M3 L5 D# F
</style>
" y" q" @! F# L! L7 d( ^) N
</head>
% _) |- f. H7 n4 F" D/ V! k
<body>
) m% s2 t$ `! j: H
<div id="pic">
1 W) L" y+ ]. X2 N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) Y9 s. n' w' \# ?0 T
</div>
+ q6 D4 D; x! Z- Y' H- V
</body>
3 ?' C3 v7 ~9 y$ g, C* t$ w* ^: \
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
