标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ B j% |% `3 s* _% n
关键在于：max-width:780px;以及下面那行。
$ P9 } {- ]" f9 g" [7 J/ u8 n
固定像素适应:
$ F" m) e5 G7 w) \4 t, l( Y( y# R
# r5 s5 F6 K) V4 t+ R4 y& h
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> 以下是引用片段：
% q4 Z4 v. }& P# ^/ R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 k) i0 H5 }/ J! R, D) s
<html xmlns="http://www.w3.org/1999/xhtml";>
, {. x4 g. N# ?. d( D
<head>
" U4 o+ o& t1 W, `
<meta http-equiv="Content-Type" c />
) A6 S4 J+ j$ P
<title>css2.0 VS ie</title>
0 Q. @# W: r9 v! [8 Z% |8 S
<style type="text/css">
/ k3 G3 E1 i- w4 ?
<!--
; O5 W( r4 i9 t# E
body {
6 M) N [* @. v1 M5 J
font-size: 12px;
, k5 r/ F- ^3 `0 b: f7 q5 x
text-align: center;
: V5 J8 N/ u1 p5 i% R4 U
margin: 0px;
5 y+ c4 {8 ?" {! s4 O2 W
padding: 0px;
5 w z. l q& R1 c
}
3 I9 i R* y. d+ n% \* `! j4 m
#pic{
6 m2 i/ q# D' F! J% T
margin:0 auto;
" \/ u) A; w: Q4 D; D G+ r+ a+ A
width:800px;
m) g$ F& b0 E, c- F
padding:0;
. t' D* c/ J6 G7 U' u/ m" n
border:1px solid #333;
/ M! ]* N3 v: r" u: L
}
2 i$ J- a4 p# Y. g* n: [% A& X, {# E
#pic img{
9 t( q$ b2 l! L3 K+ |3 }. L
max-width:780px;
1 g/ w+ D9 m7 [! O& N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 h; {. H4 p4 q6 H2 B4 d4 r
border:1px dashed #000;
+ f5 [6 q% z2 r$ o7 d% D$ _
}
" v4 X1 }; h! X3 I7 R
-->
5 C# P" [ m/ m. G& c8 @# M" g
</style>
' E) M* _& C0 H- t
</head>
/ p; l* s8 Q# R' J0 A! o
<body>
' _. c9 t) @. F+ \6 J- u
<div id="pic">
& q( _/ K# a/ P) u# |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 F+ E. D$ q+ a1 U6 i8 E
</div>
) W; W( p; n0 d( }/ c
</body>
$ ?4 t/ E8 e1 ?0 o/ K
</html>
/ v$ `. |3 F i0 m0 v
/ d& x# V) ^4 j4 }6 j* [
百分比适应:
0 g; N# l @% ]- v1 k6 p+ E' O4 M
以下是引用片段：
: S5 y! k. W( I: [/ g) S3 y- r" C, \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 ~1 I- o' d/ p1 d
<html xmlns="http://www.w3.org/1999/xhtml";>
. A* i$ `1 v% S1 E; G
<head>
9 v7 r' `9 l1 }/ P
<meta http-equiv="Content-Type" c />
0 P/ C- n6 b: z% l
<title>css2.0 VS ie</title>
+ i8 [3 k' o; z
<style type="text/css">
3 \( g* W+ p5 v8 U2 v) s; V/ N
<!--
+ X/ p# F3 ?2 \1 }( N. f8 v
body {
$ I& p. J* p$ w! o; t/ h
font-size: 12px;
- p, o. V) z# [4 q
text-align: center;
: T" v6 t0 U+ B) P
margin: 0px;
+ t0 }# }* e2 M
padding: 0px;
' [( u1 @' M# U0 L. x+ R5 d1 R
}
' S: Z# V) K6 `% a3 r H& t" [
#pic{
6 T6 @- G& }' A# W
margin:0 auto;
1 @/ D1 [& @6 k+ Z
width:800px;
6 o2 G3 s: L' R: d H5 S
padding:0;
5 u- z( ?# O! q: e6 k% J: r. X, [/ X
border:1px solid #333;
0 D( |' B# O5 Y4 m% \5 F
}
: O q2 w4 p- k' @
#pic img{
- P) g" X1 x+ F2 ?/ P4 j
max-width:780px;
4 E1 q8 F' F% L' |+ P7 r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& d: n( i, _3 {; f7 K: ~+ k
border:1px dashed #000;
$ |4 _# _$ b( I8 j; L% F. p$ p: Z f8 u
}
g/ U. y6 {: w! O1 Z/ Z
-->
! M! `% {1 G' ~) K6 K* p, X; u
</style>
! \, g- y) J9 t; e3 M* x7 j% A5 U
</head>
6 o% D) b) j! k/ l* S
<body>
( I* L$ Q" c! X# {5 @
<div id="pic">
2 E' Z$ T, j2 w3 o; \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( E! | f. Q8 [2 c7 I1 O
</div>
1 t. y l; k( I9 l
</body>
. E$ ?$ ~% P3 m4 ^5 p# h$ B! b
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
