标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 @1 ^0 |8 n! k5 T( V
关键在于：max-width:780px;以及下面那行。
/ g1 a: M. H1 y4 H
固定像素适应:
& m' [! i, _! Q% ]; A/ `
# }5 }* c! u+ ?, |& ]* H/ E
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 d9 A3 A7 {3 W1 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, A: U2 q8 t0 j
<html xmlns="http://www.w3.org/1999/xhtml";>
9 B' A+ [0 H# [. m
<head>
7 t( I6 M- _& h
<meta http-equiv="Content-Type" c />
7 z2 U6 V# U. T
<title>css2.0 VS ie</title>
# L& k) b- b7 m) \: z
<style type="text/css">
: P' K/ z) J' I- g) t
<!--
' S9 B1 j- N3 G6 [
body {
% j& o* m9 w" F& w
font-size: 12px;
* H. U, c! G0 n( A" Y% j
text-align: center;
( Q9 @6 {% q5 g7 N5 z2 K
margin: 0px;
2 H- ~% W, F7 g1 v! V% t# U: l
padding: 0px;
3 A7 V8 x5 z* F- N8 O) y
}
" U+ Q1 D! P( `
#pic{
. r1 I2 y" x, A- M" U+ {1 H1 y. O
margin:0 auto;
% S6 f2 N. W l0 ~1 n7 e
width:800px;
3 H5 z7 b6 v. a! L$ ~9 O' G5 [# Y
padding:0;
* r! l# w( j. S7 T- l
border:1px solid #333;
+ X# U2 K6 ?' ]1 s
}
: _3 o+ L9 J5 B3 A( ?+ c& z
#pic img{
4 _& [9 J. I$ h3 y, F
max-width:780px;
: ^3 E3 Y4 p- _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' n2 f% s4 y# }& ~
border:1px dashed #000;
, l% b2 }0 z8 P
}
- i! N( n2 u: X; e4 Q# E
-->
* F+ H) `; q; N9 e& F% g, M" s$ L8 d/ y
</style>
/ ~, `; `! K9 o! X3 M) Y
</head>
4 T6 H4 S" y3 R+ k4 I
<body>
+ k! A! u, k |4 R. c
<div id="pic">
6 a9 E) C0 @& a
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 d. Y2 g T3 i: r( O L
</div>
. N* h$ ], c' H* |6 v- m% h. p
</body>
. y6 n6 t3 F& _3 |- T- y) Z
</html>
% X. L4 s' Y6 @7 m1 f
% E9 X, H+ `9 K( n% b
百分比适应:
: a& d) w. m2 ?9 t7 M. u: B t
以下是引用片段：
; \1 j7 v; _0 \: S6 P! A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! y) f* `" W; x1 P, e. z
<html xmlns="http://www.w3.org/1999/xhtml";>
6 c/ ^6 d! x8 ]7 N! v
<head>
1 r9 w4 q3 {0 S; s0 B! x. }2 o
<meta http-equiv="Content-Type" c />
9 N; L% B1 @/ \6 c; R) C! ^
<title>css2.0 VS ie</title>
; F9 A; R0 |" q* ?8 M. U5 a
<style type="text/css">
& x* p3 b! y8 B$ x* l
<!--
; {6 a4 X Z3 v, I# q
body {
, D5 c: R: j [" _. ]3 R
font-size: 12px;
5 N) T8 T% W: _* t
text-align: center;
' s6 R" x8 b) Q {0 e3 b
margin: 0px;
' x: ~& M$ W! F2 s4 Q( H
padding: 0px;
) [$ b$ V- j( |. ?( H, {8 n
}
& {: e, k8 V3 e4 u1 e1 S$ A
#pic{
! a- v7 A5 @$ J: V( c2 @
margin:0 auto;
9 s" c" p. `5 X0 Y
width:800px;
3 S6 ]; t: a' p2 y
padding:0;
2 [ |; F! D) H
border:1px solid #333;
7 T0 M# F- m% c5 M: O
}
1 |# L2 J+ E* F9 @ |* Y d6 \
#pic img{
7 y/ t6 f: l# N1 u1 O c
max-width:780px;
, b% X* G, R9 z' y/ O. f6 b' L
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 e+ @6 N; K% Z% p9 W
border:1px dashed #000;
% i7 j3 `2 F% ]. l5 e; o
}
1 Q& x" W8 Z" |' F. i
-->
' V9 r, V6 ?& {# j: o. f) [2 g4 A; x
</style>
9 U- A; h$ j% s d. W+ L
</head>
: P6 R$ X% ?4 D! X( h7 q
<body>
7 O" c; E" J* O N* ~
<div id="pic">
: y& o5 ^! A& X( X. g! D- u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( y% o# V+ j) m4 h5 s: C/ ]8 Z
</div>
+ s& n! J, \& h( } H
</body>
$ I$ f5 X; n) v
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
