标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ Y8 E+ p3 s8 m" @, ~7 _
关键在于：max-width:780px;以及下面那行。
7 ^) l. l4 n& `9 A. u
固定像素适应:
& Y, B. l0 E" i, K
: p ]' |- w9 A! a
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> 以下是引用片段：
3 |8 X' h4 ]9 X: R0 w; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 t9 ^/ `% S& h; G% M" ^$ A
<html xmlns="http://www.w3.org/1999/xhtml";>
& }) G. }( k- @: P4 y
<head>
+ g9 Z6 s1 u4 U. E2 _
<meta http-equiv="Content-Type" c />
' H( U! L5 x- D: [5 N3 W8 T
<title>css2.0 VS ie</title>
) i, V0 s9 A0 W f( U5 a! s
<style type="text/css">
/ G$ h' r; n8 l; b
<!--
1 v# x4 \% u, p1 }
body {
p9 x3 G' Q y6 N* u+ D8 ^4 |
font-size: 12px;
) E% ?& W0 U) J6 o9 J7 I7 Y
text-align: center;
( J/ C4 x& B4 D* ?# R4 \) c
margin: 0px;
) [2 Y$ G) j' R: A+ y; R
padding: 0px;
& n9 X" ~8 ]0 e- k6 Y8 |
}
/ f& z' d8 o! P. W5 {
#pic{
# l* d0 O7 ?& [$ g# F/ K
margin:0 auto;
4 ~/ ~, f) Q- z7 }& e
width:800px;
3 s" G' P+ E& }" m
padding:0;
" d8 o, q3 T- m! A% g" }8 r [
border:1px solid #333;
7 R% A: o4 F$ W! W( J$ I/ Y
}
$ T( Z5 x1 J% i! q/ z8 Y, @
#pic img{
6 I; n- f' C7 c" V5 H
max-width:780px;
, K7 Z* x, Y. {5 p) N8 z) j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ {2 E! j x {/ L, w; G
border:1px dashed #000;
0 }6 r! P2 R3 P! Q4 X: l% a/ [
}
6 d) y$ [0 `4 U; U$ c' I
-->
; w2 O8 Z9 G( |8 E
</style>
5 b4 p5 a( d7 P$ n% M9 x
</head>
, C8 U5 h! M" t0 r! }' p
<body>
4 J& _1 t6 ?: u) Y1 X
<div id="pic">
/ {% V. B' N3 F, ^, i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 p" Y' M: Q4 J% R' U# U
</div>
. `9 Z* S4 Y. e: g
</body>
# ?2 O$ x" A/ Y+ C* Z) r
</html>
! e) C: U/ M9 n% o+ a0 P
$ V. s2 ?2 L' D( t5 F( Y
百分比适应:
. {6 j3 ^% g; N C; | ?6 n- ]; K
以下是引用片段：
# T6 r1 W; m5 e7 w% E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 z# l* C! e0 ?' H; o4 r
<html xmlns="http://www.w3.org/1999/xhtml";>
( h" u4 J# M0 }
<head>
6 S1 W7 a) y, K$ ~
<meta http-equiv="Content-Type" c />
5 \1 A& b% A" [2 ]
<title>css2.0 VS ie</title>
& U+ D1 @* h3 m( }
<style type="text/css">
6 I ]& c6 c1 {
<!--
; O) a2 z3 S; M, B) V" O
body {
7 g7 K; C) O# O3 F; u6 B
font-size: 12px;
2 x/ e+ w( J& ]* e/ K9 K6 l
text-align: center;
4 y( P( j( k8 `4 q8 g8 I
margin: 0px;
( C, z# O0 K8 V6 i% \3 x9 @
padding: 0px;
- B) p' T2 g& L c( j! H, i
}
4 `2 S7 g% b5 M
#pic{
0 m( C& k# U) v' Q
margin:0 auto;
$ f F& {# N/ O. T- v w
width:800px;
) V+ r# U3 f' I4 g5 e2 J
padding:0;
# ~) a8 o+ H X6 O) H5 q
border:1px solid #333;
) }$ Y9 B& K9 v+ r# Z" Q
}
; _7 X3 A4 V6 A( c. q
#pic img{
7 D7 E- q, z( d- u0 V+ S% ]: A# F
max-width:780px;
2 V6 e: E% q, d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) F2 b$ ?" s3 b# m8 k: ]
border:1px dashed #000;
& q% i M q4 z% Y; N
}
+ l4 w; z% H* S. Q* s0 k0 W
-->
: q8 t- O" C, q* Y
</style>
, g5 I( A( E) g( w' ?) `* Q
</head>
( d, F. {- z" W# O6 i! O/ R
<body>
k1 n/ U# G3 X5 o; `; M& R
<div id="pic">
# e5 k2 ]" _: R! R: H% u% i9 U! c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 X& u& ^; D9 Q/ Y+ y
</div>
; i8 ^& {. O- J$ f) \) c
</body>
! D; O. d S! r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
