标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 B) h$ t8 j2 `) t* k/ H
关键在于：max-width:780px;以及下面那行。
1 U) S: L# c0 _3 _( F
固定像素适应:
, U; U* O5 U4 Q* u4 C' n
3 f) I5 q$ |8 I8 y
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> 以下是引用片段：
7 A, n6 F8 x9 s, b, U! @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. ?+ }7 O* L6 p* K' D$ K, C( `/ U" [
<html xmlns="http://www.w3.org/1999/xhtml";>
/ o, Q/ r l6 B6 M/ L( O7 ?
<head>
; I3 F/ F0 \+ ~4 P* |7 z' {
<meta http-equiv="Content-Type" c />
7 h( z& E N! x+ O0 X+ K* i B
<title>css2.0 VS ie</title>
5 x8 l# T1 Q( Z: Q# Z5 p2 X1 B X
<style type="text/css">
8 @$ N6 c5 ?5 P9 p
<!--
: F% I# O. i( h+ W* L/ K9 C" [
body {
7 H( c l8 t/ I! {: S/ Y
font-size: 12px;
. t- `9 u3 Z6 s/ P; Y& b
text-align: center;
% ~, b! ^* \ b
margin: 0px;
, ]6 }. ^1 L+ s! m+ w0 c7 w1 i; i
padding: 0px;
) b5 L0 S( u9 C+ X/ U+ K) i% ~
}
( U! E+ E2 z5 c8 e8 p' S
#pic{
2 ]; y3 r; r' t1 B
margin:0 auto;
' ~3 _! G! r" N7 ^0 L2 e
width:800px;
: {6 I4 q7 ~! R
padding:0;
- u% K3 u/ @! I# M
border:1px solid #333;
7 p0 ]% P7 P$ {3 @
}
$ Z8 K% j" I U9 C! P; I; f$ N
#pic img{
: J1 ?$ x5 @4 G7 I
max-width:780px;
0 x/ g2 D' ~$ ]! b) f) o
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ F* A! y+ [) [
border:1px dashed #000;
( Z- a% `" T4 |. F* z
}
+ l; [& K( V$ o* Q6 O
-->
$ R4 \7 v. N- r$ C
</style>
' X& d2 q; @3 p
</head>
+ \3 b' {9 \ }/ M$ L
<body>
: ]# t- n- S9 w# D. D- I4 ]; n
<div id="pic">
/ z+ z* T/ J- P+ G( X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
C: c* S/ i) i, }8 O! ]( P$ [
</div>
N4 G$ N7 v- o! V8 T
</body>
2 J& Z4 C8 O6 I: Y' a* A! }! @7 I
</html>
: r; ^$ B* H6 ~- j! g5 A1 G
7 @3 h5 u6 r8 m
百分比适应:
; \% I4 b- M7 u
以下是引用片段：
: o8 h( N2 n( o9 C+ t% H, Z" m% |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ G' V$ @" \; O8 p
<html xmlns="http://www.w3.org/1999/xhtml";>
* `& ]! n4 n2 ^8 u" F) v
<head>
$ {* \/ [" t+ X) |5 A: q2 h1 W1 b
<meta http-equiv="Content-Type" c />
" ~7 f& j" _0 ?8 m
<title>css2.0 VS ie</title>
6 `3 C7 ^; _9 N" t4 Y) Z' i# q
<style type="text/css">
% q3 R5 ?/ I m
<!--
6 h/ n c3 ^0 ]8 q
body {
3 I* ~' r4 w5 P! O, R1 x- s
font-size: 12px;
2 F/ w2 |% j+ Z3 v
text-align: center;
) J) u' w/ a/ b O8 m, B3 R* y
margin: 0px;
- X' B( k/ [' P3 n7 L) a6 P2 ?5 n
padding: 0px;
$ [8 I: U* m# y6 s# \6 Z& @' ~% Y1 W
}
9 Q/ P; \' t! j! y: m( v
#pic{
' q6 g' e5 [5 r
margin:0 auto;
0 D0 j+ _) @) ^' q: X
width:800px;
" Q; J% r$ C8 f7 f0 g4 b
padding:0;
4 J5 ~' R: V h6 h- e
border:1px solid #333;
7 G# ^+ g, v$ _( Y2 D, b9 f# d
}
) E3 C. \! X3 v/ M7 y, |
#pic img{
5 e: J( R. G0 J( n$ A( U3 g1 N
max-width:780px;
) F# w" K+ w! g# g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- l6 s4 u/ w9 a( }0 }
border:1px dashed #000;
1 H" A% j5 B& \" L- N: ?
}
+ `8 M4 u) O8 t2 U5 J; Z1 L
-->
' w$ j0 E! @; x& \$ } v/ p
</style>
& R$ f9 E% ], P" F* r, }
</head>
/ M8 y* S# c f& ^9 a9 e1 P; e3 S+ W7 W
<body>
) f; U+ u; |5 y! O- V% ~$ m8 c
<div id="pic">
. Z8 Y9 w# f6 C+ O( i5 S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 c. @3 P" Q& ~' s( S0 y1 _
</div>
3 }; Z* ]& r3 Y1 s, z, D# Y P
</body>
5 F1 z, U. K. J0 f$ d" ]5 N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
