标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: `% A! s! ?% Q1 p% K
关键在于：max-width:780px;以及下面那行。
9 F z3 Q* u$ _8 l9 _; }
固定像素适应:
6 @) k4 b( v- W, M
! _9 M5 q2 v* 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> 以下是引用片段：
8 |. X( @. e6 O+ ?: C( x5 }: t8 |2 `% e+ r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% e% g) L5 g" z9 N; R$ @
<html xmlns="http://www.w3.org/1999/xhtml";>
& x- _. D5 ?: h( Z/ m& K5 i, V# m
<head>
4 s' Q1 C( ]9 t A% k
<meta http-equiv="Content-Type" c />
4 ? W c3 l1 h
<title>css2.0 VS ie</title>
6 N7 p3 ]; o+ q% q. }5 J: G8 @4 Y
<style type="text/css">
& R: c( N r# B, G; C* L2 ~
<!--
& _' u4 M2 W' ?5 u6 y
body {
# ^) e7 ~) L& C
font-size: 12px;
7 j* R U" K; E* Q* p7 Q4 b
text-align: center;
/ i- T/ `% F# S! o! ^+ h+ } a
margin: 0px;
( H9 R8 x7 l+ ^" ?+ K
padding: 0px;
% {; c/ @3 m* o& ?1 E) A
}
/ ~' `2 {: V1 A) _6 R5 n9 s
#pic{
4 F9 o+ |; A% j7 P* c4 P3 |5 Y
margin:0 auto;
" D, t' K0 S! e6 b
width:800px;
: k6 z% [% X Z2 n. l; ^- s) T
padding:0;
3 a r% |- P7 ?
border:1px solid #333;
+ E6 \) k8 j; \4 r: P
}
$ C; [" H5 a; H6 K
#pic img{
/ \# b4 p) O; e V, n) A
max-width:780px;
6 R+ {8 m% K! G q- D7 t
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 n" Q" U5 _% e7 S d% }
border:1px dashed #000;
& A' [' n, n! a6 E/ q n: G
}
: A" b7 f- m3 ~- C0 z
-->
. q% }% V9 d9 V# l: T
</style>
1 D7 j' ]# k( p7 I, y7 d0 E1 M
</head>
9 N% k) w/ o7 S4 G/ a: ~$ f
<body>
' L0 D& ~0 |6 q8 S" [: q; i
<div id="pic">
* J7 n. @9 @6 F9 a8 D7 Y$ e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ o, J# J; y7 X, A' V o
</div>
s3 y, d. y- R# j4 C, o4 R( O
</body>
8 l/ c- w- a' Z+ I- p6 I1 p( c0 R
</html>
/ d G' k7 `! H
$ O5 P" a& ?- e9 d& _5 Y" Z4 r2 e% O
百分比适应:
) C+ V3 ?( [3 w; B+ ] {
以下是引用片段：
/ g. a) ~) y5 J5 {+ X0 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 a0 j. ]7 Q" [8 p2 q
<html xmlns="http://www.w3.org/1999/xhtml";>
8 ] j4 X, n3 c3 N; B# B
<head>
% k# v' w- I) w( w
<meta http-equiv="Content-Type" c />
7 U8 v. Y0 p! K8 N9 X2 j
<title>css2.0 VS ie</title>
* j/ m) x$ t3 ?) A+ @& ]( G
<style type="text/css">
1 @- Z7 a% i7 v9 k' ^& g$ \9 K
<!--
$ w' Q, \$ l6 g) g
body {
, v1 F; b$ q; ~. f. D) p
font-size: 12px;
2 b5 T' [: Y W+ e# c8 b; q
text-align: center;
" c2 a# P g- N8 l7 _
margin: 0px;
b4 Z& e0 S7 Z" Z" W0 p
padding: 0px;
( m) X1 i- {* ^* N6 w
}
$ k3 @( Q/ I$ M/ H
#pic{
' H1 o; M5 p9 C- r0 ^& D
margin:0 auto;
' G. q8 f0 k" \$ l4 {
width:800px;
9 ]0 S- a8 B+ H! j
padding:0;
5 M& r; e% {7 x6 b2 s
border:1px solid #333;
8 M1 D' k9 }; x$ d, x" i# q2 m
}
2 U" {% f+ F5 P
#pic img{
B! G2 v5 Y4 P/ w
max-width:780px;
, [/ R5 K1 v; d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 n) a! H) f$ B2 f' ~! z2 I/ E
border:1px dashed #000;
8 @! ~5 ]* \. s4 v7 h2 Q
}
* f) J* w, ~5 r! [8 u9 _3 S9 D4 H3 T
-->
) J6 `* B9 {7 _( J9 m
</style>
& y- q6 @0 E9 C5 S+ |
</head>
+ P8 z$ K5 m- n" G) q
<body>
& @" L s, u% Y T
<div id="pic">
( V" g' c+ z: ~9 f# l- n' ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. y4 I- B: W' K
</div>
& M) p" q2 B7 j7 j: ]" c. h( A! y
</body>
l9 I% f U& L5 S/ I9 ^3 W
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
