标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 F; ? r# i8 Y; i m, W3 e( Q
关键在于：max-width:780px;以及下面那行。
& J( O( Y3 V! l* \
固定像素适应:
( ^) n7 Q: v! P9 g. b
5 D1 I, @2 |( u3 r) K9 |$ D
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> 以下是引用片段：
1 q) A! l8 T! G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% Q% h8 W8 {+ n0 X
<html xmlns="http://www.w3.org/1999/xhtml";>
( A# v% A- v$ ]5 h. g. U# n
<head>
# A9 L8 a/ X8 u9 Z. W9 s
<meta http-equiv="Content-Type" c />
# c- h3 I0 h# W7 K% \
<title>css2.0 VS ie</title>
3 B0 n& L+ `" n7 b4 h2 i
<style type="text/css">
9 l3 r8 d6 B4 u: M* X, U
<!--
7 x) Z, z- [1 G& R
body {
& d+ `* }% ?9 p3 w
font-size: 12px;
5 J$ d2 H9 | X
text-align: center;
/ x; E. ~' l9 K5 _! S. h8 Q/ v/ n
margin: 0px;
5 |1 f8 W- t: s) s r
padding: 0px;
x" a4 c% G8 ?2 m) T" c! n: j
}
; X$ A& I$ r& V/ a: y0 l
#pic{
2 g: a8 q+ @6 N0 C7 {/ Z1 t3 c, f, F
margin:0 auto;
) C6 `5 `& z% T6 _
width:800px;
( T: b6 b& Z* l: a$ j* g- A
padding:0;
1 t0 X% E5 q! H$ j9 |
border:1px solid #333;
: @" b5 ^$ R6 t; v
}
8 ^, X |+ T0 M$ X8 D
#pic img{
& b- v- q4 j3 r2 w
max-width:780px;
0 H% P, r5 s7 e/ x# k g# E, c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. k% K7 w; F7 N _ s- L
border:1px dashed #000;
; f R6 e& A F& ^9 G9 \( i
}
2 |6 T+ a' S3 ]) O, @' U4 W2 p
-->
- r" m. t0 D6 H; o
</style>
% \# W- N F2 {; Q
</head>
, p9 a% X1 b# `% v9 D
<body>
6 H; a( j0 `& [' ]9 w, [8 O
<div id="pic">
" p, p# G5 w+ e3 N/ L! S: H8 d* w5 }7 @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" \8 L- W. s. Y* q# F6 l
</div>
9 O* r# m; ^8 V
</body>
8 u6 u/ a3 G! v, Q
</html>
$ k/ @! W, l) m3 d
D* K' l3 ?2 p2 L! |# i }/ u/ O
百分比适应:
8 d* \5 g) {& E) g' s) X4 i2 E0 I
以下是引用片段：
# k0 F1 m7 B% Q* p. p9 X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 m8 v2 r7 S i6 o p
<html xmlns="http://www.w3.org/1999/xhtml";>
5 @3 A! ~( f6 ^. A& Y7 V: E4 v) W* o
<head>
; }9 t* K. X- F+ x! t' q
<meta http-equiv="Content-Type" c />
) \" C" l$ P! p) M
<title>css2.0 VS ie</title>
! }. d" p$ k6 s, x) ~
<style type="text/css">
" |/ |) l' A+ F5 ]8 I! p) @
<!--
# a6 G5 u% W5 n; [" }* |
body {
1 m W* l6 E3 l4 B; n, R/ Z& S
font-size: 12px;
$ D' a" G' [" N" Q$ D- p7 I+ i
text-align: center;
# c% U) @9 J0 d, ?3 Y! r# F
margin: 0px;
9 b7 { P$ V# _/ q& X
padding: 0px;
# G% h* G* a* z- Y# e
}
$ q. c* F, n. L& A% M
#pic{
/ Z( _ K7 n( g6 w# G) E
margin:0 auto;
0 j- h. H2 V9 q- k: ~4 t- K: S
width:800px;
. R/ {8 r4 ?# h
padding:0;
8 e3 ~7 E* `# t; `6 m h# g; J
border:1px solid #333;
, l2 U! E C7 T- @
}
# U1 {% d1 Q) N" j) Q4 q" J7 Z4 Y/ E
#pic img{
& F) _( d: J& u$ ^$ L
max-width:780px;
& ^, Q5 @6 W/ I+ f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 Y2 g; n/ R, r0 X( h* r
border:1px dashed #000;
( d5 `6 R) Q, q
}
* e6 o5 y6 T5 _3 e
-->
( F6 H9 Q; y: q$ V0 G
</style>
% u1 K n- v) t9 q# d
</head>
r3 ]9 w. r# l& n3 P- p
<body>
" ^* }7 _5 l7 E: x& m( _
<div id="pic">
1 C/ }! |1 Y! m) y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) h: f/ E, E. [& y
</div>
& W" f! _& O- C( c% ?5 d0 G$ p- ]( ^
</body>
. E8 M5 P% c1 M3 T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
