标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 f* d0 f; L# }; d0 d; Q' i
关键在于：max-width:780px;以及下面那行。
, F# w! y5 ?% |2 @
固定像素适应:
; M' A) V$ w& a, T9 Z/ t
1 u4 N# c2 Y, f
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> 以下是引用片段：
# }# m. T/ c9 p( n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, {5 a5 Q) V/ C
<html xmlns="http://www.w3.org/1999/xhtml";>
( Y7 p5 d+ }) }( B+ i0 Q4 ]4 v
<head>
& u i3 @5 B7 v
<meta http-equiv="Content-Type" c />
' e {/ ?# z+ V+ r
<title>css2.0 VS ie</title>
* p/ l+ t" I4 J7 f$ {7 [
<style type="text/css">
$ U) ?$ w X6 E
<!--
; ]6 U; X/ A- t: q# G
body {
) I& g" }; t' s5 C& `( K
font-size: 12px;
! G; d! |3 R4 `9 V
text-align: center;
* D2 N! X* u/ {$ M8 a; y
margin: 0px;
2 B6 J) o" J9 m/ a
padding: 0px;
8 E- I8 ?8 z7 e* [- s& M
}
! q9 ]+ x1 O3 Q8 ~
#pic{
# h9 Q, \( u( t- D; K
margin:0 auto;
4 H! z# Y+ j' N0 }* [3 P
width:800px;
$ E! v( a o. p1 b/ o k
padding:0;
! X! Z# f5 M. z" P3 H0 M6 ~+ Z
border:1px solid #333;
2 B, b2 F, z7 u2 C
}
& z6 S3 h# M& b, r
#pic img{
' N; n4 `1 D7 {, v
max-width:780px;
5 ]: a" s' ?3 J0 P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& A4 W" ~. A' f
border:1px dashed #000;
4 j1 P7 s ` I
}
, J; n ^& F+ a
-->
2 L; M' o1 W0 o6 N" n' c& x
</style>
7 |" v! W' f4 _" ?- i6 K$ q9 w
</head>
4 q$ g0 O: T R- d, ]
<body>
& ^+ P+ \$ D- h8 C! z6 I
<div id="pic">
9 N3 J6 P5 R" m3 c5 Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: O$ t3 `- x8 z5 i
</div>
: W' i9 E( ]. Q9 K
</body>
( _) u0 F8 d) F( j
</html>
+ p V3 @6 n: w) X+ |
5 A0 R4 z9 E4 F% u8 F
百分比适应:
( A4 R6 T% e1 l9 q$ ^$ U4 ]; d
以下是引用片段：
' G. W% p' C& L) E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* g; l, [1 Y9 |! W: a+ Y2 J
<html xmlns="http://www.w3.org/1999/xhtml";>
3 |. C$ `5 O, P
<head>
5 Q* c/ ~; w' c3 l# I7 |9 n
<meta http-equiv="Content-Type" c />
+ Y. k3 w" Z8 K1 Y6 c
<title>css2.0 VS ie</title>
$ ?0 t! M# C; w) E5 Z
<style type="text/css">
1 f; Y& L) [- P3 ^1 w
<!--
# z6 e1 g0 ?/ W1 l u
body {
# q! t# N# `$ n+ p% [& |( z
font-size: 12px;
9 T& Z! C, H2 k
text-align: center;
5 b) V9 Y; \0 g/ C7 p
margin: 0px;
! h" r' v9 H7 O, E. ?: J
padding: 0px;
- M# t$ Y: q/ M3 P1 a! [2 _' A8 J
}
7 A6 ?+ X8 \- O1 r6 L' h- q/ {) O
#pic{
7 `" p- `# ^& t, Z" E
margin:0 auto;
0 X$ P- @; A" W
width:800px;
4 I7 K5 P' S: f6 H; O7 p
padding:0;
: S5 A5 [0 }3 \# o
border:1px solid #333;
1 k/ @* @0 h8 |+ s7 Q
}
0 W& N0 u% y. d) n" m+ d; W
#pic img{
3 J8 M. g7 e9 X* Y
max-width:780px;
2 U9 ^* @. S' S% {9 f3 }# X
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- e$ }! f m+ r+ b& k8 U- a- E
border:1px dashed #000;
6 n' X. S7 e/ g; c. S
}
0 F. I. t: W5 m
-->
4 e5 `7 \# |, W2 _* a9 q1 K
</style>
; ~2 X- [4 m0 [: [
</head>
$ Z! q7 B! u4 T- h/ ^9 u% I; Y
<body>
$ }; y2 D3 U! Q* i
<div id="pic">
& E; Z' x- S: T0 u9 w! J# T" J( S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* p' l9 g- c1 W& r" _: x$ B, D% u0 I
</div>
8 a: B. b+ {, K _3 s
</body>
4 a0 x2 F8 z$ n% U9 U) f+ L0 T4 P
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
