标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* E/ {! F _9 F
关键在于：max-width:780px;以及下面那行。
! w6 b0 V* t% ^8 l7 r, {* C, a! `
固定像素适应:
$ }+ r* _1 I8 @
4 C4 B: M! b5 w* T5 n
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> 以下是引用片段：
, D7 j+ R7 i8 ?, b) r( e6 s0 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 A: `6 t' U8 A
<html xmlns="http://www.w3.org/1999/xhtml";>
2 j' I w$ b( `9 \! G
<head>
% [' t! I9 o! S+ N- ~8 F
<meta http-equiv="Content-Type" c />
+ }: \; @3 j; S, x( A+ O/ C+ \) }
<title>css2.0 VS ie</title>
* D2 ?% ^! K! i! [- _3 C4 F2 ^
<style type="text/css">
( s3 i8 w/ J& {6 a9 k- E5 F
<!--
/ z6 n0 y( K+ U& p% I0 M) F7 S$ e! K
body {
. L) \' b, A; y6 D% y
font-size: 12px;
& g" j8 ] t! |0 O* `! }; I; [6 Q& ~
text-align: center;
& M K* c& v" G; ^
margin: 0px;
8 u$ G0 V! q7 L2 ~
padding: 0px;
4 \3 z/ N* G4 X: ]
}
+ Q0 j% }' u9 j: s
#pic{
( D2 g1 V6 F! s5 a
margin:0 auto;
6 g# B G7 m. A
width:800px;
$ w' E6 I' p+ B0 v- F$ G+ A5 a
padding:0;
9 ^' ?* ?4 l: m$ {+ c3 |, h
border:1px solid #333;
+ K# [1 C; {4 A% c- d
}
7 k7 E. @1 j6 ~- m6 U4 R5 c
#pic img{
. U# `) z+ a J s! r G
max-width:780px;
# U) O# [) V7 s! W s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( ~" N, P0 }3 S$ [# k! z
border:1px dashed #000;
4 h3 \: n& z/ t9 l u: ^% d) Q1 C
}
! u) i- s% P+ Y; I4 Z+ J
-->
+ L n* g6 p) v+ \# P0 `# M" w( k
</style>
8 W/ H& ?" @ g. F
</head>
0 K9 J3 s- y9 g1 X- b
<body>
% V- c. W9 V; c, ?- @ [& J* R
<div id="pic">
+ K! [4 g7 w% T& N0 s% d6 g/ p
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 `6 L3 [0 X2 u1 I2 Q
</div>
- l6 y& w& F" M0 r
</body>
8 l M$ \2 L! u7 O
</html>
2 _& B6 V/ c) j, D" O' D2 t
% r) L' Z ~. ~. T6 r" U% W c
百分比适应:
4 j6 h' a# q) O0 t/ u" ?
以下是引用片段：
; u6 W& | X, i$ B7 I. j6 [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 A) M- e9 t( I" |
<html xmlns="http://www.w3.org/1999/xhtml";>
7 Z/ N7 c) y& D: ^* Q3 T6 t- T& _
<head>
4 c+ U* e1 N' w$ c
<meta http-equiv="Content-Type" c />
9 _' _6 s" j6 U# B5 s; \7 J6 Y0 W
<title>css2.0 VS ie</title>
5 E6 ~+ ]" C- g7 u. p& U
<style type="text/css">
/ z( r' I4 N0 c, [* n5 T4 ]
<!--
5 L; Q. ?0 s& R
body {
% ]0 Q4 ^, c9 w
font-size: 12px;
' v$ a$ m0 g7 C! G) [: m
text-align: center;
2 k7 a3 i/ u/ u4 I4 V% {
margin: 0px;
1 m0 _* s0 b3 D3 V0 m7 d8 T
padding: 0px;
/ q1 s& B0 S4 f1 t7 `8 X6 m
}
+ q* d, X, ^. d) x( M
#pic{
( u7 N" Z' i4 C m) |& ]6 J
margin:0 auto;
7 f: \0 H8 B0 U
width:800px;
+ R) | \4 s2 J- q
padding:0;
! M4 N; U- f. v: Z, b0 W4 c
border:1px solid #333;
$ B; b/ R: {' a2 u+ U
}
8 l$ ?1 k7 p4 I, H/ H, \
#pic img{
* N: X: D2 a1 H6 {
max-width:780px;
0 |9 Q! `, }1 Y9 R
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* n6 ]8 v5 ~4 s! K& ]
border:1px dashed #000;
7 I5 v$ h; W6 x3 B2 H- e! r7 i
}
7 s& y1 T1 f3 n. Y0 |0 @+ `
-->
# t7 _ L4 @% z) c: `
</style>
% q6 F' K2 T7 ^2 ^0 K# N9 X4 i2 Y
</head>
' e6 o. u i& Y: o5 p1 H' m
<body>
; n, Y9 j" P- i& d' l$ C: x$ M
<div id="pic">
2 i: w, ^9 R- w; I; ~9 L; U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 n6 ^: h, {+ ^, e H' `" e. Q
</div>
) `8 X7 h: H) R) P$ E9 {
</body>
8 T3 e1 O5 ?& \/ Y) j
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
