标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 z2 }* _( h W6 @& w! S( ~% F
关键在于：max-width:780px;以及下面那行。
/ X4 G' P9 e. C6 j. f
固定像素适应:
1 g; G* v. V3 J6 N; A; [
. E- H6 t$ }$ z6 |1 {) 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> 以下是引用片段：
% h. D' E# ], G+ a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, K% z; y* W2 h+ a
<html xmlns="http://www.w3.org/1999/xhtml";>
; V" w( l% b$ }, L" S) w
<head>
6 N. M+ o8 X4 n: z' A0 {6 s
<meta http-equiv="Content-Type" c />
* \, X. K- |# z
<title>css2.0 VS ie</title>
X2 b4 U9 ~! j
<style type="text/css">
. v! w6 f/ q: H
<!--
: H# F" f, V; F+ F- n0 Q% p
body {
5 W) S; P. C" l1 w: x* v0 j. s! v
font-size: 12px;
, L* o0 j8 A; F5 v. O1 R: _
text-align: center;
) t% F6 T3 x1 N/ ^3 W
margin: 0px;
4 E$ g5 }' c4 G- ^0 n! b
padding: 0px;
, N# y3 u$ P- b. V
}
' S& n: C* E2 |2 f0 b" v, g
#pic{
7 q7 ?2 O* s, t: t% N8 o2 S- Y6 \
margin:0 auto;
* v) f* W# \+ M/ E
width:800px;
0 G4 T L6 g" x) U/ f2 D6 v V
padding:0;
; p: x5 U0 J* y1 R% `2 V/ ]3 x$ e
border:1px solid #333;
) Y% _1 W1 V e! i
}
5 \1 @/ h" r. m# r
#pic img{
/ A ?! I, U, ~2 l8 Q
max-width:780px;
2 l% g$ a3 ?6 P% ^
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' a$ m* y( y D& \3 u1 m7 ^# g
border:1px dashed #000;
6 {. V4 i* }* s$ P$ C3 Q
}
% \- n: h; f% n; t1 s( b
-->
* `3 C/ I% g k2 s1 q
</style>
( m* x1 Z5 U8 T# d8 p! @
</head>
( I1 K* H9 V) Q
<body>
! p& I, w- ?# T& `/ M" w; L+ N- i
<div id="pic">
' `7 t# D! k( f/ ~; X! d
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: N e! S- i2 E1 T5 |
</div>
& L/ L1 K/ P( f! x% z" _" ]
</body>
1 B5 C( O6 J$ S' L: [" j
</html>
' y4 t! l4 z# w6 h5 n
; f: P: `) g. o1 L3 }& j3 k
百分比适应:
. V2 k. D M, t6 \
以下是引用片段：
# Z7 `: W/ Q/ b9 q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 P2 I$ X) [2 |) F3 C
<html xmlns="http://www.w3.org/1999/xhtml";>
/ X9 O+ H0 c1 `- u" @$ r
<head>
5 d1 q$ K1 }5 U# u6 V: n5 k% Y+ P
<meta http-equiv="Content-Type" c />
* B0 T( Q3 t( n7 c
<title>css2.0 VS ie</title>
! u% T+ g2 `' f1 x8 M! l8 V
<style type="text/css">
X3 L- k, Q: P" T! i
<!--
2 Q& o7 f7 X/ S; y8 @1 N# o
body {
$ g& _4 N; E9 x( ~% y
font-size: 12px;
. B$ N6 z- W, x) [
text-align: center;
& x3 K t$ p' m# Z: @
margin: 0px;
, h( P' J. t% a6 _- t& q- B
padding: 0px;
+ ~/ ^: G0 s) t
}
( _( G- H4 o9 z% }' Q# \
#pic{
8 F; {9 e7 w, Y/ s! g# ]- O
margin:0 auto;
: a; o. |3 [% M, b4 ?! g9 L
width:800px;
( u; t: i+ ~2 O/ O
padding:0;
, `, a- g7 Q1 V- y& S! G' e( M
border:1px solid #333;
& }, t; }- K( ?& E% `8 ~
}
: ?; N0 j; T Z. p" r4 {- n
#pic img{
3 z, A/ z+ @. @+ O
max-width:780px;
3 H/ C; P8 ^2 O/ g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 u$ [1 S# G A$ C9 V4 `
border:1px dashed #000;
; n$ L7 U, h, s- ~$ y0 t8 W9 {/ j
}
. M p1 X0 S4 C% G! a5 M
-->
& h0 q" c8 \5 r, ^9 Z7 Z. L F
</style>
' o) T) ~ L# m
</head>
n- c) _; s$ G. A. W
<body>
) [% U: \5 y# s
<div id="pic">
8 Z1 a3 V/ D' }/ `6 I: X( i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 U; C1 V7 M) E
</div>
% } g" N9 y/ V
</body>
7 u4 \7 c' X$ y/ M6 c$ {3 T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
