标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' E1 o" A8 g0 X6 h9 M4 b- A
关键在于：max-width:780px;以及下面那行。
6 a9 V/ X; Z1 u: J# b' d& b7 {
固定像素适应:
i9 v' Q7 g1 u1 d# e
c: J c' h* s0 ^6 l
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> 以下是引用片段：
" o7 M: d5 W0 F- z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 p. ^& m5 j/ a. ?3 t# Q
<html xmlns="http://www.w3.org/1999/xhtml";>
3 C9 s5 \9 [' O, i; u& _
<head>
d, _; S* H F4 c
<meta http-equiv="Content-Type" c />
4 h9 Y1 s$ [& S7 P: F
<title>css2.0 VS ie</title>
2 u! _2 [. B* Z0 v( C) G2 H
<style type="text/css">
g' S: N; C: P. ^ l( ?
<!--
' e* c; ]( S6 Y, A- ]# P
body {
6 D& G" Z9 l" b' Z
font-size: 12px;
1 k, I% o4 c4 y6 x: d( ^
text-align: center;
% V( [5 b- b6 x* o
margin: 0px;
; M( z: Z7 }' J; i0 q
padding: 0px;
+ {8 k& L2 { |6 f' i
}
* S- W8 m2 ~6 R0 w5 J7 q
#pic{
# {% d* ?+ A& k6 s& I
margin:0 auto;
5 y! O3 p4 c: T& X: R' E
width:800px;
9 J: b* M; V$ }% f) P
padding:0;
+ R0 c8 D8 p! I7 z5 @% ]* g) l
border:1px solid #333;
4 J% M: T. h+ q& [
}
& X! V- F) I4 a8 X8 i! _' o0 v
#pic img{
5 l/ K a/ q" T, g* I& }8 D5 c& s' K
max-width:780px;
+ w+ I, A' h* x8 @5 Q1 Z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( K. W8 V6 @: I
border:1px dashed #000;
0 C& v4 r6 J$ T: ~0 w
}
9 r' {9 r9 Q7 O# M h
-->
; l9 e, A* I9 G3 ~1 V& r: n+ Z
</style>
. d) M- W" f) i8 f4 _; }% d0 \
</head>
& T+ d/ y' h% S, g6 Q
<body>
* ^; R' U: j0 e7 X/ g2 ]" ~: d
<div id="pic">
. M) I$ X$ j$ \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 L, f0 l! R7 I) @% |0 L; @# r5 O
</div>
0 ~; I( y) t- o# p! O
</body>
4 l1 i' }, I) e# H. c A+ R
</html>
4 T" r3 f$ `/ c% a
$ a) y! R0 U3 x3 R* S3 O
百分比适应:
. @- \) r9 A0 Z. \# l
以下是引用片段：
/ ~- w( R$ z0 O/ _- p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, @3 h2 ~- Q3 \: k
<html xmlns="http://www.w3.org/1999/xhtml";>
. x# p \$ e) J
<head>
* N" Q4 T% s- q- ^+ h
<meta http-equiv="Content-Type" c />
% o, I$ @. ?; t& j9 F- j
<title>css2.0 VS ie</title>
! B6 [+ D) K2 k! o
<style type="text/css">
) u4 w# x1 K" y8 S6 _- L
<!--
. G4 Z% W! ~' k( v& E
body {
. N: ` a1 p( E+ Q" C: Z5 u9 z
font-size: 12px;
% I2 M+ n: O/ G; r
text-align: center;
3 B' t8 b1 R! d6 t. D; T) B
margin: 0px;
2 l& l, ~6 v. X6 J
padding: 0px;
: B3 x6 Y8 c1 y R# v
}
9 Y, n. y' j' U" ]& } k
#pic{
+ u M5 _* s' X! ^1 w+ d
margin:0 auto;
+ t7 x3 i$ o: O
width:800px;
7 \5 C* @* g& D+ F4 e
padding:0;
" N0 K! ?7 f7 \ s4 E. a
border:1px solid #333;
% a# h' ?# c. L- T& ^
}
9 Y0 f% g9 @; e0 u: Q8 T/ W+ ?
#pic img{
" _' P( c4 K7 V, f! ?; a
max-width:780px;
* ^0 _ O* U. M7 D/ q+ E& o
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* U0 A0 J1 T9 J" q6 J6 A8 s
border:1px dashed #000;
! Z6 n* I) K2 W4 } d% X- b8 p
}
2 z& ?' ]) m* O
-->
, S. A+ H' E/ Y
</style>
2 U* Y* }+ g* B: w
</head>
6 i& p" Y! @) O) N9 D; \: k0 `
<body>
; s& L7 p8 D3 x+ f/ d
<div id="pic">
! m: G1 j/ `# n8 x) O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' S5 C& U3 y7 M* E
</div>
* C9 G* g3 c% e. S6 \: f+ s3 N. Y
</body>
+ p: X( |+ X! N" N) c9 v
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
