标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: I0 w& Z2 _) [2 U/ X
关键在于：max-width:780px;以及下面那行。
0 b; Q+ R: J6 D9 C
固定像素适应:
/ k6 s. M: N$ x1 a6 K2 l: K
9 p* h: ^* {! _: r; W
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> 以下是引用片段：
1 J; M' Z8 t, Y) X& I$ ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% P# k0 y$ c7 }& L# h% L
<html xmlns="http://www.w3.org/1999/xhtml";>
5 p7 g7 \" n% s0 R$ {
<head>
3 }+ y( I: S- n
<meta http-equiv="Content-Type" c />
) H( r! g. k$ Z
<title>css2.0 VS ie</title>
k( z# @" n2 n. N6 D% i% T4 L6 A
<style type="text/css">
" S* V0 K; a' m( K! P" }& T
<!--
( a* u: Y' C O5 Z. \
body {
9 ~' G7 Z- y9 D8 F
font-size: 12px;
: ]8 o6 W8 I. @. c2 P j! _7 G
text-align: center;
! q: G% i2 b1 i8 r
margin: 0px;
$ X. `; A3 v( J7 T' x; X( Z" V
padding: 0px;
8 T# s9 |! U$ A, x( \: e
}
' O! q9 G4 n* B, R9 f' L& f0 E
#pic{
/ y* U& A+ X' l9 T
margin:0 auto;
7 e7 i; S. Y9 Y: ~7 M' T
width:800px;
) y# @, }1 f0 C9 i, F
padding:0;
# Z+ ?. i/ V6 I
border:1px solid #333;
4 M, j G+ m) ~2 ~2 S% ]& R9 ~7 J
}
! @0 l# } L; C0 |2 `/ ?3 D
#pic img{
& L. f1 k% _3 `: N3 p% Z/ A
max-width:780px;
* ^) e! Q5 \5 p% W' k3 j `8 \
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ Q& Y8 k8 g. |$ i: N; [
border:1px dashed #000;
6 e; B) i$ Q+ s+ P' F9 x; D+ t5 A+ _
}
7 U8 U6 u. E: c: M9 D5 U
-->
Q6 h! Q' V$ @
</style>
" o# y+ v) p- `0 R6 Y
</head>
7 F" J& ?2 ^+ J$ V1 }
<body>
9 B* H% S* c0 i
<div id="pic">
" r0 N) G" h) _1 K) t# {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 z' {$ V7 }& Q9 K" \9 h7 h
</div>
+ ~ ] w( p. J. r2 j
</body>
; K: U: Z7 q# g9 x& H' R
</html>
2 f! ]) g5 G! K9 ?4 P
7 L1 S8 o/ ]% F) U7 m3 F7 Y% a+ \- Z
百分比适应:
) T$ u+ V% e C8 R; P
以下是引用片段：
# n' R9 _5 q& q( G# q; f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ u; W3 t! C8 W$ B" T
<html xmlns="http://www.w3.org/1999/xhtml";>
9 h& E I; u/ I. Y* S3 _; C
<head>
/ Y1 l$ t2 u1 Z5 w, Z1 e1 M
<meta http-equiv="Content-Type" c />
/ F+ _, b l1 A* e8 z0 q+ f: P0 P
<title>css2.0 VS ie</title>
. r7 e0 S( E! |$ x$ S( O5 d
<style type="text/css">
% ^2 [) R! p* J3 h- n
<!--
5 R1 h& \6 u* ^; k" Q9 y; g4 Z
body {
5 k5 G! \1 g: I: K3 j% c
font-size: 12px;
5 a3 Q$ I3 ^. [/ Y9 ]& _2 e
text-align: center;
1 p( s4 J* y- ^
margin: 0px;
) ~1 s) ~7 }! ]( }+ S* P
padding: 0px;
' V( Z; t- x- z3 Y
}
8 f2 Q7 Z- h& c3 ]
#pic{
% w$ r) ~0 Y( }% N
margin:0 auto;
6 t3 l5 h% I/ G$ w
width:800px;
7 I! e3 M! _9 t# X# ]7 n) k; ~) |
padding:0;
e+ S% }; p3 h2 Y( @
border:1px solid #333;
, _0 F8 Q/ b" B2 y5 X6 b5 i# ]
}
' S- ~" Z% N4 O3 N; K
#pic img{
% d1 R) s, }4 Z; U6 M/ D8 [
max-width:780px;
8 K8 {: S6 S$ G- O: F; \! C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 F" [# u6 W( [! ^! t" D
border:1px dashed #000;
5 x- @& E. L' z& c6 S, b
}
0 X' Z+ a }- U y
-->
! Q5 q2 z& M+ o, G/ m1 M
</style>
$ D0 W- q6 a8 h; N* ]1 l! r9 c
</head>
0 C' e6 H9 J% {( c
<body>
' h! | L' H6 k3 l0 d
<div id="pic">
4 i; v- _7 g' ]) _' V) l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 w7 A8 u. n/ b2 u6 O3 K+ X
</div>
0 {2 N* i0 ]! G- z
</body>
$ w( I! K: P2 e- g. l3 ]) H
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
