标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, e/ k/ k( }( |+ @+ p
关键在于：max-width:780px;以及下面那行。
2 ~ ` o5 f- o& e) } g) \
固定像素适应:
8 i6 a% s( Q& ~& K9 C% k& v& E: f* R( y
7 |2 [ _% F/ x
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> 以下是引用片段：
9 B" P3 z, A, \# S4 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 Y! B# _$ `* ^5 j5 a4 H
<html xmlns="http://www.w3.org/1999/xhtml";>
' ~& A& K* k% t% D+ i) B
<head>
0 o- F5 I# U# x$ S- P+ q9 y
<meta http-equiv="Content-Type" c />
) k- o* H5 E, L% a, k5 L, R/ e$ H
<title>css2.0 VS ie</title>
# X+ ?, E9 Q m. ^$ S
<style type="text/css">
1 |! i$ W8 S( q F
<!--
' R7 b& |/ y% N) ~+ Q. t
body {
5 j; O4 V% c4 V
font-size: 12px;
, W4 G' E( x6 j
text-align: center;
: |# y- u5 B; z( `6 N6 y
margin: 0px;
' y1 a* [0 C0 W7 l5 \
padding: 0px;
* m4 f0 e+ T2 t- K
}
7 ^* k1 l( x* q1 l2 ~( x
#pic{
' y9 g% Q* m2 ]! m$ s6 c6 h6 e! ?
margin:0 auto;
3 z' S" O( z9 D5 n
width:800px;
. i# I0 b6 S6 Y" ?% k" G6 _
padding:0;
7 E0 ?, H7 o; V
border:1px solid #333;
& x( Z5 n- r- P0 @+ Q
}
# v1 m1 a1 \5 N( s5 E
#pic img{
' t' F- i+ |2 X
max-width:780px;
& X: y: p; \: ^, U* v& W% x- W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" h5 H! Q5 N3 S4 z2 W
border:1px dashed #000;
* V9 Z7 H2 n, k0 K1 I
}
3 \1 W" r" U& U* [
-->
& J; I4 I, T* {- L- u- E
</style>
3 e* Q' Q: o- u+ F6 f% a( w$ m
</head>
- w6 a! A3 `" G- Q$ k o
<body>
, X M+ g' a' q% Q
<div id="pic">
/ f4 p6 l6 s: ?$ h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- S" E, S( q, t8 |$ R1 t: s2 x2 k
</div>
5 `9 M4 m, H3 ]/ V* X* Z
</body>
1 n5 p2 Z; p; y' e$ F* W
</html>
, Q3 ]- C; J* E3 M+ T
" E1 [+ d p$ U5 n- D0 P' h9 P
百分比适应:
/ t) o0 B4 ~. B6 w7 F5 Z
以下是引用片段：
' S* j! b2 i: Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ W6 f! [5 a9 @2 i; R. c
<html xmlns="http://www.w3.org/1999/xhtml";>
$ U! e/ `. X9 J$ A. F. _+ V- ?
<head>
9 k5 U/ `2 g. K6 s, f9 \, }) m# l' o
<meta http-equiv="Content-Type" c />
" O6 E7 t! W2 g
<title>css2.0 VS ie</title>
& k3 m% t' h1 J- X0 V0 K9 H
<style type="text/css">
. p+ ?! Z+ j7 v
<!--
2 \! w4 b, w8 [0 O
body {
: R/ N& X4 T" B9 N* U! j* m) P
font-size: 12px;
7 R) f/ v1 e( V! m4 h( h
text-align: center;
. w9 ^6 v& U' A& K
margin: 0px;
7 Z& i' l8 Y: y8 O
padding: 0px;
+ \6 t |& G, f! f' e
}
# x# {( [' B% k' \8 `' r& D; }
#pic{
; v X, Z7 B8 w3 ]: w4 G. G7 h
margin:0 auto;
' w/ x& d9 J9 A+ n/ K, [
width:800px;
! a: N' y9 v K1 t) |8 d+ j
padding:0;
8 o& r7 W3 i9 g( ^
border:1px solid #333;
/ U6 P" G) `% r1 X
}
# C. e9 M* e1 _( Q
#pic img{
0 F4 w3 }) B7 J8 b) A, B
max-width:780px;
, M2 B8 S( K( p$ v% T
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# N4 J: ?9 V5 f% M
border:1px dashed #000;
O; D3 p7 B: i; O2 E3 h% o, e
}
/ R/ d7 |, ~* W6 {
-->
+ U9 V# X& c; D& y/ M. M
</style>
( V! u1 g2 n' f1 l
</head>
# t* ^# A4 }/ D2 ~: b. t7 ]
<body>
% O8 ~# c( E5 l& I5 a; D! l1 A
<div id="pic">
4 {1 H, |' ?7 n5 x5 Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& o; e2 w* x# X/ w+ U) a
</div>
, U( z6 n' v U% }; R
</body>
7 V0 @7 U2 [, Y3 @! I
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
