标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' P' K6 c1 l5 B! G$ i$ ^5 s# u% S
关键在于：max-width:780px;以及下面那行。
9 U! {) u* g: n2 r0 U! p
固定像素适应:
% U2 `6 K3 C; e: R
# c! }: @$ N, r, z- O- b6 l
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> 以下是引用片段：
! Q2 J H0 V* J9 r% p' t8 M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. A; }1 ^- c# s9 H& g* ]
<html xmlns="http://www.w3.org/1999/xhtml";>
% r+ r+ i# W! ~" \; ]6 F1 P$ s
<head>
0 I5 w' e9 i' R* p2 \- ^
<meta http-equiv="Content-Type" c />
3 m' H, O) u7 m* `! l
<title>css2.0 VS ie</title>
. k, H7 H6 s# M+ s) p$ H- b
<style type="text/css">
9 g7 H d0 Z. x8 V
<!--
) ~9 \- L( H" \7 t
body {
8 N+ g f U: d$ Z+ o* w- P3 Y: v
font-size: 12px;
& R7 u" u3 I6 c8 l0 V
text-align: center;
. N% D4 F2 T6 K% |- }/ Q
margin: 0px;
; @; |. x+ ~. Z
padding: 0px;
$ w: ^- ~, {4 S y W
}
, @% F' C, M4 y8 v8 @% W/ D
#pic{
- F$ Q5 S) M! D; b y# q
margin:0 auto;
- O$ \4 ?# }3 [/ G* H
width:800px;
1 H4 b+ r2 i6 t3 }0 Q
padding:0;
7 q1 E" ]8 Q7 _( f( `
border:1px solid #333;
( C- r) I7 V" X: A' F0 Q& p7 n
}
1 k$ `( e8 G9 s; W5 p5 R
#pic img{
# h" Y. F- @- n N P
max-width:780px;
2 z: g. D* C1 A, e7 I
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 l- G+ }! C3 P6 q$ q& e
border:1px dashed #000;
n, `" O! t3 }+ }/ y. g
}
5 z! t/ \0 @1 C( V9 w
-->
0 h5 i: }0 _8 E4 k. }3 ~3 }: r- y
</style>
' w2 c- y* ^: d* \! x# J
</head>
) \5 w/ p' r+ o/ o9 J- g9 n! p
<body>
2 w! M5 p3 N8 y
<div id="pic">
; l1 [) Z% v) ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 b$ { C1 X @# c$ y% f$ x) ~
</div>
; b3 {3 e, ]5 x5 ?* H/ ]' g3 h& m
</body>
9 x3 K# z* y1 u& K$ B
</html>
+ ]# B3 [. S) u, `% Z2 {
* P( e. C y W3 j8 @
百分比适应:
; I% G, j1 Z' e* _2 P& r; m- e! o
以下是引用片段：
6 D+ r9 F4 ]% ` j) g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& L! g1 w% R" A9 l9 [
<html xmlns="http://www.w3.org/1999/xhtml";>
& c: U O1 i) h6 c% A/ E+ f0 _& p
<head>
+ b# ?# @: j4 p# Q- [
<meta http-equiv="Content-Type" c />
4 v4 ^& D/ F9 o% N9 ~* E& t, R
<title>css2.0 VS ie</title>
g# X. y- ], C
<style type="text/css">
5 ] q: {8 y- j3 ~
<!--
2 C7 p8 ]: Z3 W) O2 Y2 g
body {
6 B2 }1 @! a9 L, J1 F/ u
font-size: 12px;
+ p! @; S8 C- g4 {0 K! ~6 ]
text-align: center;
d: P) W) i! F4 V* J6 J7 ]# d, W2 F
margin: 0px;
1 R( o+ J, \0 s
padding: 0px;
) |% J. \$ e( I9 k; ~& l. L
}
4 l& G3 h0 w: t/ p Q
#pic{
' R2 k/ f/ d8 x' Q9 L' {
margin:0 auto;
+ P Z4 ~4 s, u( c5 Y) f
width:800px;
# Y: G) `6 d5 `5 H( t! S. A% W0 I. H
padding:0;
! {" o& i' w" f& S' X
border:1px solid #333;
% B0 t7 S! |2 @2 z4 N: N2 b
}
& D6 d/ {7 h" R4 Z6 k) @0 T
#pic img{
0 m3 j0 ?' h, d. i& o) p
max-width:780px;
( W2 S s, b' z: U4 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- m H6 z. t1 Z" k0 J* r
border:1px dashed #000;
2 C$ H' n1 F; Y7 e1 C. z) H
}
! y& z* V+ P* ^) e
-->
! V! ~3 v$ @" J( Z2 O# n) a8 s: D
</style>
: R' e# F* Q' [$ ` ?8 C X
</head>
) v- _ r- d1 S c0 W
<body>
* k Z& U" q& a7 W
<div id="pic">
\2 Y( x7 i- t9 ? Y, R; o
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% T0 O% _& R% K5 }& y( Y
</div>
{, }6 q3 R+ f
</body>
8 G3 D' w! }$ M
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
