标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 J$ j, D1 @$ N! n) C
关键在于：max-width:780px;以及下面那行。
1 b- E/ `' s0 ^/ c6 K
固定像素适应:
1 Q6 g* B: a5 T4 _6 A; T
% q+ A3 V; G# p# }5 d: O
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> 以下是引用片段：
$ G4 g5 A% I* E! w4 U& a$ L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! ?7 g4 w( B* i
<html xmlns="http://www.w3.org/1999/xhtml";>
( N( s9 Z6 S' `8 ~1 N
<head>
3 W8 _) o0 d+ x: D
<meta http-equiv="Content-Type" c />
5 j1 Y5 Y3 d9 s2 R* s0 B1 I/ n
<title>css2.0 VS ie</title>
0 i# I! x7 }% S. n
<style type="text/css">
. u }, Z4 ~6 l) \
<!--
6 U7 \7 N' s$ L. J" L8 I2 B
body {
& Y* x( e. T' c; g2 H
font-size: 12px;
& T- y& t! O# e' N. U; Q% t
text-align: center;
& N# v8 G# A3 B4 q" n9 `% H
margin: 0px;
0 C g2 s1 D$ C
padding: 0px;
& l9 P; G4 ?- I( W- n! E) r7 s
}
2 A' D U% B, \; u& U* v6 r: s' ^
#pic{
+ z# h' R6 N6 {1 r4 F- D% u
margin:0 auto;
$ U8 z8 o9 C/ X* y9 T- K- k0 H- {/ @
width:800px;
/ Y: g" C. o& v* `2 X6 P" X5 w* X
padding:0;
) h3 H5 I K/ ]4 v
border:1px solid #333;
- T1 k N" D6 I8 i
}
4 _' s4 I: Z* W6 D2 T+ E/ \7 N) ^
#pic img{
; h' G+ @1 W7 d r
max-width:780px;
& o( |. F# \9 j5 Z. x/ }( g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 \9 Z u6 E: z2 |" e0 O( x2 Y- ?
border:1px dashed #000;
( v' q5 R1 Z4 t
}
( y& u/ M% Q* z9 A0 t% f+ X
-->
; `) E6 {7 d! S3 C+ k
</style>
7 M2 f) T6 z8 A
</head>
3 G) x" w0 ~/ T
<body>
% K9 c: M" l' w/ n5 p
<div id="pic">
3 Z5 K7 w7 a) |1 {+ R+ p$ Q0 k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) }6 G0 x, g/ u$ ?0 Z; y: N0 ^" |! P
</div>
9 G8 n! Y2 O4 v3 s( v' v. Q# E
</body>
. S- ~* R; g+ Y( `8 M
</html>
; @+ K& s' ~' p) i" D w
& [9 E5 a& A1 r. a( S
百分比适应:
9 I' ]$ h5 \- G5 r
以下是引用片段：
8 A, I( f& e0 V1 V+ E$ _$ Q* Z. z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- q4 d: r: c. {0 [% F) j4 d2 n4 X
<html xmlns="http://www.w3.org/1999/xhtml";>
/ V' ^6 P2 i7 O) K# a7 Q+ \1 u
<head>
, O9 n- s6 j7 f7 O# {( Z8 M* a) J
<meta http-equiv="Content-Type" c />
* \" V1 m% }1 U, c9 G- P; l
<title>css2.0 VS ie</title>
8 G5 c" E" O' u- @6 O6 }& r- t/ m5 h
<style type="text/css">
$ {- A) L/ A3 _ Z ^2 W' [3 i. N+ k
<!--
* H7 N8 c# _2 a/ b1 t
body {
$ C- }4 m/ h2 ]3 O8 i7 a
font-size: 12px;
5 O9 g% C2 v& F+ Y" {" i% u5 ^
text-align: center;
. \+ q! ~0 ^( c
margin: 0px;
. o3 ~/ Z% s# u2 s
padding: 0px;
! o. z& l/ g7 ?$ u- ^$ @! U, D
}
& p& p# W/ y7 t) j$ Y& E4 D! q0 P; m
#pic{
9 t# W0 J& J5 [) f F
margin:0 auto;
1 M7 l! @+ f, S2 d m4 j
width:800px;
. ]6 C8 J1 c a( F1 E7 c/ N
padding:0;
( A, k7 D5 L2 @, D; ~2 M
border:1px solid #333;
+ c+ g; L6 E3 A+ G s4 q3 J
}
3 n% @9 H# A$ N8 k! w
#pic img{
: B# J- P9 X7 [- k& q& Q2 o# g
max-width:780px;
4 o7 b3 P" o" S, v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& X: ]' \* m7 M
border:1px dashed #000;
' N d$ X. d/ L8 K, Y
}
: Y1 `& [* R+ P/ U
-->
: Z$ b M/ X: t
</style>
) i. m& t& P: Y
</head>
, L; R9 |; q4 h3 p
<body>
8 B# \- ~3 |6 B# L/ t* ]4 X' q1 t
<div id="pic">
' K; c2 b0 f/ E! d" p O2 J% _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' F, u6 O* y/ |) y5 \7 k
</div>
n8 s+ j7 O( H+ k& A) E V l L
</body>
[2 R; c }% k% n- {+ F2 T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
