标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 X, M3 ^. p( g f7 v
关键在于：max-width:780px;以及下面那行。
, P( f- p: s! R
固定像素适应:
" L" g; b2 k3 x/ l/ N* F- \
' n/ O- p4 s5 K: P( x! 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> 以下是引用片段：
+ e3 ?3 f* F* c5 }$ ]- B( Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ A" n, i. y, m9 M/ }% u/ E2 x
<html xmlns="http://www.w3.org/1999/xhtml";>
$ N4 q1 e' l( |; r: Y7 B
<head>
! K2 T$ g. O5 f% K
<meta http-equiv="Content-Type" c />
5 o) h1 V, m0 [( n. m L
<title>css2.0 VS ie</title>
7 S1 y7 Z& u' w/ @
<style type="text/css">
; w" ?) \/ z8 A0 p$ X' u5 G+ U
<!--
0 Y5 O( p* z. i$ A2 R: M! s
body {
1 y1 ^- t- _4 z4 U! L& P
font-size: 12px;
+ \+ P! U/ O- `% [
text-align: center;
4 C1 _! B: |9 \. A. w$ f+ \& \
margin: 0px;
1 ?3 S |- I% ?
padding: 0px;
: @5 F! V6 H6 d) d, M$ S0 Q8 j
}
5 K' u: y6 t1 m' A
#pic{
1 s" i e* \; l+ G, u" Y1 S! y4 `
margin:0 auto;
& N5 o7 L7 Q) w$ M0 C
width:800px;
1 i2 f. N: Y* O) T, ~! f1 h
padding:0;
6 }1 h0 { m E: ]: V& ?+ B
border:1px solid #333;
" _ H# R- _! d
}
9 M, B$ Q" C/ Z8 }/ s
#pic img{
# y1 C1 D: z7 `3 w s
max-width:780px;
: x$ ~/ R0 C/ \% I$ o5 I _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! h6 L" ]& M9 A/ ^3 H
border:1px dashed #000;
0 D% f, h( h9 h7 z) O% T
}
4 @: i/ ]: u4 {2 H/ C; t' Q
-->
& t( |. r8 d0 x9 s6 v0 [
</style>
: O% @* G9 u w2 j
</head>
4 ?8 b+ J; Q$ u J5 |+ v: g+ D0 ?
<body>
+ R# O+ Q" W' f. D1 |! x! |: c
<div id="pic">
6 @ O! h) W8 L9 b3 n ]# U" r
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( U9 J: L, n) ` V5 h" }
</div>
" i% @5 m( z1 r) c
</body>
) E3 J9 I% R q9 h- P1 C
</html>
* ]2 [6 f, E& a5 h* G: _
+ O4 T. r2 S( H& }
百分比适应:
& W# J7 o* T2 g% |' C- O+ u
以下是引用片段：
& b$ v$ n# A" w* }5 ?6 g( P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 i# f R2 |7 y2 D/ A4 C t
<html xmlns="http://www.w3.org/1999/xhtml";>
2 l3 a- u7 Z; ^( ]0 i
<head>
4 K, e9 A; G J% s5 }
<meta http-equiv="Content-Type" c />
4 S4 `0 i$ ^7 g* S% o; S0 B
<title>css2.0 VS ie</title>
( U/ _" C$ R; L! N* N
<style type="text/css">
/ k& q0 e+ T/ d* T0 g
<!--
: A' O! u* b% e+ t: _, u
body {
" U/ O+ h+ b8 }7 w# J, @ a
font-size: 12px;
4 ^! D2 `3 H! A3 ?
text-align: center;
+ L. E* ^& I/ V) S0 D
margin: 0px;
+ H [: w2 R/ p3 q2 J. C5 D
padding: 0px;
4 |1 S7 e+ b! |6 l b
}
- ]6 j+ g, v; ~1 h, T
#pic{
* W- i2 a& b9 C
margin:0 auto;
# p# t& o1 f+ u3 D* V+ n/ A3 Y
width:800px;
3 B8 f: e. `) I0 n& m
padding:0;
7 |/ F E; F6 x
border:1px solid #333;
( e, G/ ]4 g6 B* S) w3 D
}
5 A# X V1 g4 x5 |
#pic img{
) G7 V5 D/ _0 ]: z
max-width:780px;
* T4 p9 m/ ?# r. r0 }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% P6 d4 n3 f$ a6 Y
border:1px dashed #000;
1 |( g3 z. E+ S( r& m ?8 w# v
}
# W" {4 T7 H" \, h& Y
-->
# P$ m2 S5 N$ o+ _) y
</style>
( A& E" R& i; A7 q
</head>
$ ~ m4 F! A' q! f. j) |
<body>
, l# U0 ]; l: I4 w+ f
<div id="pic">
/ f, u5 b9 z3 i2 [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" C- r& n6 i7 }1 t$ [
</div>
, }3 Z2 \. P' o$ A
</body>
: F& h7 ^8 s3 z, J/ }4 M& ~5 y
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
