标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ f4 V |- q+ J+ `; o* @6 i+ K
关键在于：max-width:780px;以及下面那行。
5 e* v3 V; y1 }5 L. T
固定像素适应:
5 U" V% h& M9 h g
* C; I" F7 i: r, c' r. }3 v
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> 以下是引用片段：
# X" X5 l8 v, Q& c% a4 I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ Y; d& q- B: ?* m' E
<html xmlns="http://www.w3.org/1999/xhtml";>
% Z. L0 w) g [5 B. S- h7 _! \
<head>
# ]6 `" o; _9 ~. v! d/ E, F4 A8 W
<meta http-equiv="Content-Type" c />
) c9 x) O6 y+ q& R6 w, d# J8 ]
<title>css2.0 VS ie</title>
5 _6 e8 z a# U8 |+ J! V2 K+ A, h' V
<style type="text/css">
2 l) s( N8 N5 L7 h
<!--
2 `* [9 a- Q9 ~. `, M: E# e
body {
! f8 H+ }. B! K3 c7 \% f0 p" B
font-size: 12px;
. s' l+ I" j% a. l
text-align: center;
7 l# U1 m2 }* {0 o
margin: 0px;
" L" M9 m* j3 d, j5 D0 u
padding: 0px;
+ v5 F( a# t; X5 Y8 h. m
}
0 N% |4 [ b3 a0 p0 g' `$ R
#pic{
, @% i" M" W }! D6 b
margin:0 auto;
5 v4 C. \# N i. _
width:800px;
1 \" m+ S& |7 l
padding:0;
8 D/ q2 T4 B- s; w
border:1px solid #333;
7 ]- N- J" i: [) K3 R8 J( k! W4 w
}
: ~' j" u: h4 H
#pic img{
7 y2 f/ ]5 E/ X+ Z" q
max-width:780px;
# Y3 n9 `! p5 t
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# h1 U- x! h7 i
border:1px dashed #000;
! Y) _ U% n l1 j& j7 |* y' w1 j" [
}
3 P+ y6 q( b- N8 F% s* [* I6 |
-->
7 ~. V- m. R( h2 F" v2 K" J( E
</style>
; x& f7 f8 _8 }4 T" \
</head>
1 l% S" w& Z4 }6 V% D
<body>
, L4 O1 k9 g3 H4 I; W
<div id="pic">
; U& {+ F6 E2 i0 w$ I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' O) H+ x4 b! Q/ G9 V$ J$ c
</div>
+ v/ P, V& }# h! W
</body>
4 K- F% u7 r3 X# S+ v' F" `
</html>
5 U" g; K% |$ y/ S
/ Q `6 k7 Z8 I. V" }# m
百分比适应:
* O+ D, Q' H: V
以下是引用片段：
' Y/ N! T: X3 \! i/ t' b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% F; g" \, y& ^+ L) }" G
<html xmlns="http://www.w3.org/1999/xhtml";>
' g E- W. L% ~/ ~2 ]0 O
<head>
8 m3 h H, h7 a
<meta http-equiv="Content-Type" c />
. g. G0 `1 @1 H! n! m9 w6 J
<title>css2.0 VS ie</title>
# \" F6 } g( ~! b5 O# i- j% r
<style type="text/css">
2 q4 |+ E7 Z4 R" _2 O
<!--
$ V/ Q3 f0 t& e" ]6 w: t0 ?' l" R
body {
& A5 \8 S+ v5 Q' W) X9 J( {. ]
font-size: 12px;
1 V" K/ f, E2 a$ {* T
text-align: center;
" B, |8 K. V( h' n, w$ C6 z* v
margin: 0px;
* W! \ o$ i' z8 ^
padding: 0px;
, U5 F/ m% I9 T
}
2 e3 D9 @* i' P* Q( r+ d
#pic{
# d/ {3 G) i; R2 n6 Q& V$ d4 r
margin:0 auto;
& i1 h3 G6 u0 r Y
width:800px;
* R& g( g4 G& Y
padding:0;
5 |6 l! g, O9 J# P6 j9 S3 e5 ?9 ?
border:1px solid #333;
2 C* X z/ I3 Z' {- Z" J2 w5 M
}
0 S6 l5 \& f/ P
#pic img{
3 t& c1 T# Z" e3 T
max-width:780px;
# n: u4 D" f* e% b- {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. x9 I0 L; @7 e1 Q* o
border:1px dashed #000;
: ~7 n0 \# c6 X0 s
}
$ C. Y* c% i: k! h9 ?/ Y* H
-->
5 A# U" t1 T% y k( l3 `! Q
</style>
; t- g' ~( _9 C
</head>
# F- Q8 ]+ T9 R1 C
<body>
4 A( W' m6 Q2 C5 r# T1 s
<div id="pic">
9 K+ I3 T% D- a- U) N! g/ s
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 I/ O% O- Z* j. v4 i
</div>
' c3 {! G! i( b6 f) x4 G1 |8 }" k' |
</body>
$ L; \* m0 B* z* S/ }! l
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
