标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' b% Z2 X+ k8 v& F3 F* ^
关键在于：max-width:780px;以及下面那行。
" @' L$ J- z7 g
固定像素适应:
4 s. z0 S+ b, j
+ {2 x6 j2 C. ?
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> 以下是引用片段：
! a8 J3 y0 W4 j, L0 J3 f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 z- i# u/ A- B6 N8 C9 q+ S
<html xmlns="http://www.w3.org/1999/xhtml";>
( Y y0 {8 D! k
<head>
# {# E& a: N+ M' a) @9 H# I1 m& \
<meta http-equiv="Content-Type" c />
0 [7 D$ e3 |4 w) u' i7 z' O4 T
<title>css2.0 VS ie</title>
& j; Y: d N7 A$ m k
<style type="text/css">
3 D3 w h" ?; J* \6 [& k
<!--
8 {! [1 M# `+ f4 q
body {
! E6 p4 s) h8 i
font-size: 12px;
7 z6 ^" B1 z- }" R1 `9 F; `
text-align: center;
; G( _! y7 z/ S+ A5 H
margin: 0px;
; p, N/ r, P% A* h5 D! o/ C
padding: 0px;
3 A. `* x& Q) }/ c3 L3 c% F
}
7 r/ c3 N, X6 C( `: ^- n# I2 `! N* d* R
#pic{
' y, D: Q: g; @2 @
margin:0 auto;
& h# S- p# Z. ~* b1 F
width:800px;
3 [- F% ]! t3 o( F. [
padding:0;
' h& T' R2 A+ @ w# t3 C! Q
border:1px solid #333;
5 H8 [5 \6 L' }* w( ~
}
* C& E/ z2 W/ ^
#pic img{
( A8 Q" S1 x- B& Y
max-width:780px;
2 ~) h* p9 [0 U% K/ g5 B: ^3 N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, T$ z' z1 G* r6 l
border:1px dashed #000;
6 g4 j7 N3 s9 R i6 ?& M3 C
}
* ^: l1 y( W$ M1 n
-->
/ W2 e F) h7 ~- @
</style>
0 |6 K9 ~, j- h9 N7 p+ n
</head>
6 Y2 o0 a% B# l2 g
<body>
8 `/ r7 _5 ]% t7 M3 s& `
<div id="pic">
. [$ ]& `% @* r. j# M9 O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 e3 z: V7 M, }# v) Z# `4 W
</div>
, x& X, \9 k- ?/ K4 y$ \, v( ?
</body>
* y0 K# s+ j8 U
</html>
7 T5 R6 k( [& i% h( [0 t
) b J8 H8 V/ y5 R' V$ P
百分比适应:
. f; C; h, l) @
以下是引用片段：
5 G! m- a& ?3 d: R+ i1 x1 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 w& K, l4 G( Y4 B
<html xmlns="http://www.w3.org/1999/xhtml";>
. D3 }, Y& h7 F) d6 L& c
<head>
; K8 ]' T: [+ i8 f
<meta http-equiv="Content-Type" c />
# E" v& j$ Y( |5 b2 R1 c7 e9 m+ S
<title>css2.0 VS ie</title>
" y, o: o0 x8 H
<style type="text/css">
3 E8 l) i- r& J+ t2 @2 [; ~
<!--
* S; t5 N( L7 X1 l4 p5 b( U A
body {
' q9 [1 V# \& ?/ ~4 w6 c
font-size: 12px;
0 J; u4 ]6 m" p' H
text-align: center;
) N2 A% u r5 }% `
margin: 0px;
* S: R* @0 f e+ J
padding: 0px;
3 F, ?. I+ Y0 g% s6 ?6 z" k
}
) s9 F, ^, N$ t+ @% S" p
#pic{
0 O* c: W3 K' u! r9 U
margin:0 auto;
; C$ H/ X7 o1 d* q3 N
width:800px;
v; ?4 F p+ N. t, q0 V/ Q
padding:0;
3 R2 ]: ?& l1 B5 B, x& X1 m/ e
border:1px solid #333;
: e: n, Y6 h- B$ G
}
7 a, ?" J" s: O8 F% R) N4 O. p
#pic img{
; O" H2 ?% K' R& n; x2 A
max-width:780px;
# S2 u. X, s4 `1 {# Z* N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) ^" `1 S1 I, i: n. g
border:1px dashed #000;
8 y$ {& Y4 b Q6 o
}
% M9 V$ J) {: f) q0 n+ L
-->
8 U R" h$ N% w7 M: ~) f
</style>
8 t" C, r2 v' k g
</head>
) g* }/ H9 G0 |# y# \
<body>
$ @, V1 I, S: Y2 }, a/ @# [
<div id="pic">
0 p$ a) G$ y1 G/ ]) G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 d0 x; t# |+ e- {9 [9 U9 z0 F
</div>
N& f0 z {1 \1 D' Q: \2 V
</body>
# q: \ P/ k$ B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
