标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 `; L/ j( H) S+ E0 M
关键在于：max-width:780px;以及下面那行。
: ?8 F% u5 r# Z- Y- y) M6 y
固定像素适应:
/ C3 Z$ D) w7 E; D8 w
6 q% @$ [! v* _4 |" @ p
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> 以下是引用片段：
. g+ w% g% P. `8 T& V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& E. w7 N$ q- X7 J, V6 P5 G* N4 y
<html xmlns="http://www.w3.org/1999/xhtml";>
# {9 f- ~( s; z% W+ P+ ]
<head>
& ?7 w0 B8 A5 }4 `! z( K7 {
<meta http-equiv="Content-Type" c />
$ G3 l1 Y7 x& [* k# g
<title>css2.0 VS ie</title>
* l) \- u. G* O4 t8 h+ O
<style type="text/css">
: Y$ D; q# C+ F4 W0 P% h; ~
<!--
2 Z1 h( n( M7 \
body {
f3 m4 l4 b* c: T! S# g! y
font-size: 12px;
& @; {, P2 E* T2 A1 ^
text-align: center;
% H7 p/ Q- T8 j" v" ?6 {; B
margin: 0px;
- K) c, L0 D; a+ H, S
padding: 0px;
! f' `! j: D \4 V5 `3 h3 M' r8 q& r
}
# h7 O @# U( k8 d0 u
#pic{
- s+ t6 Q; b' J" P/ ?- E/ a
margin:0 auto;
0 D" S# B1 v1 C9 c6 r
width:800px;
1 e: D: j) \# Z# |0 x- S9 y
padding:0;
; q3 W/ ?9 ^, j- w4 u
border:1px solid #333;
2 D+ K! ~0 L; k
}
, X/ t' h6 ]$ N1 o8 G
#pic img{
4 o# \ R* K% j4 m; N2 D
max-width:780px;
) c! f0 s0 N4 d5 `2 g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% Z! o# q6 U4 V* a+ S9 t4 s
border:1px dashed #000;
1 }: F3 J0 c* z/ s
}
% Q2 a# b6 m% P! X8 x# t; y
-->
, {& m$ R+ y3 V7 n$ U
</style>
9 r4 Z7 E# _- |/ q! j; s! Y
</head>
# f. p& h# _" e2 p8 M6 ^+ x' F
<body>
K. B/ u2 U, [; f1 b
<div id="pic">
2 d9 v1 N. Z8 M& e3 D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ M+ q6 T" y. p1 f* a
</div>
% y* Z9 |4 \6 [9 ^! S7 @
</body>
$ p8 \) M4 e! q7 ]% K) w/ K! ?0 H% L
</html>
& H: O0 }; h5 M _% v
5 j3 S) Q$ K% |
百分比适应:
$ C" a7 Z' F6 @- X! j. j4 Z) U( p2 V
以下是引用片段：
, `7 M( S9 F. I7 p8 w) F9 X1 x: n3 b7 |: X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
~2 @+ E2 N6 ^; |
<html xmlns="http://www.w3.org/1999/xhtml";>
: v! g9 B8 J+ Z3 |+ Z% f* v- s) i
<head>
, H/ v; P, V9 @1 a
<meta http-equiv="Content-Type" c />
. K2 G5 ?* q$ u
<title>css2.0 VS ie</title>
9 U6 J; s1 p* [+ f# D3 m
<style type="text/css">
& t! c. E, R5 `, r/ Y
<!--
0 {+ B( B9 y+ X/ B2 Z9 w; W) s% c' M: I
body {
5 q- {( B. u' r
font-size: 12px;
7 H. I: c/ p1 Y: k& W; J/ L& X& Y8 e( ]8 P
text-align: center;
6 q( d. G5 {" D& l2 u! A
margin: 0px;
' D, m/ q5 r: D4 m6 ?
padding: 0px;
0 n1 L" m I# F
}
4 c' ?) M! T7 T
#pic{
8 Z% H+ t1 A, K- Z
margin:0 auto;
9 E4 N8 ?. ?1 t: X: u* r
width:800px;
: m2 x( a7 e: z5 N! {4 @- _
padding:0;
. }: x! a6 t% _& U$ e8 R
border:1px solid #333;
0 j! s" W; i. L( E6 C: t
}
p! i6 ~+ R8 i
#pic img{
4 A7 N, K+ D9 s" L
max-width:780px;
, y1 X2 @( ], q2 d h# K$ q" x
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& j& H6 |1 ?0 z' n0 @5 p) N) m w
border:1px dashed #000;
1 s4 J5 A+ B0 n
}
; c7 ]; u8 W, z" }% v; S! N* ^" x
-->
3 C( y; }: u0 G; h% ^
</style>
3 i) c4 V0 r. ~# r- v/ D
</head>
) _/ C' |: |/ r5 ?4 T+ l
<body>
+ @3 Q3 }9 V3 S" M
<div id="pic">
/ p( z3 q/ _3 |4 u1 Z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; i, k9 D" E+ [7 [
</div>
) v; L8 Q0 G) o: T
</body>
: Z- D# K: ~# R5 s3 C; u
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
