标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& n$ q Q) g) v- A3 y
关键在于：max-width:780px;以及下面那行。
9 d* k ~8 f. S1 I/ S
固定像素适应:
& \0 q7 @) u& I: `7 A( N9 @
- ~8 S0 i; {$ v% A+ Q
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> 以下是引用片段：
+ W7 K# t# T/ C: G$ f" t% p2 {" W3 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# u" @2 _: Y7 W8 K- T& a. b" b
<html xmlns="http://www.w3.org/1999/xhtml";>
0 f1 T: T& m( w+ ^7 h) F6 U
<head>
* W* B& h% |; o7 k( n+ A9 {
<meta http-equiv="Content-Type" c />
% W! n# O( A+ D$ q' L2 C
<title>css2.0 VS ie</title>
; }$ ]( o- o) k8 _
<style type="text/css">
8 g! L. p+ ]( H& e/ f
<!--
& [# F/ `( H. F
body {
+ P8 L+ |" Y9 q, Z) F
font-size: 12px;
5 F W+ L7 T8 k, t
text-align: center;
9 ` v, Z7 {% z. d! q- I
margin: 0px;
\+ q( C) j3 \9 F! D+ h
padding: 0px;
* l2 r5 n6 F' P
}
& e3 ~) Q2 {1 r
#pic{
1 G, S& w0 r7 }2 V* Y+ K
margin:0 auto;
& E# F7 } M+ g4 W% Y7 Q4 ?' l1 w
width:800px;
$ h; G6 X* [7 d' |& m4 \1 r3 E
padding:0;
7 f# w) G! ^) F* v: y7 c, B
border:1px solid #333;
4 ~2 ~1 a" e. m; T; B
}
+ w# W. U/ C7 ?% e$ v- Y
#pic img{
# ?& }5 ~" h5 d0 A4 X
max-width:780px;
2 m3 _% m6 S4 N- x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" K# J) g2 K( @9 v. W# w- x8 R
border:1px dashed #000;
5 y* M( j# p+ W% X$ \
}
! @3 r/ [$ |1 @ k% Y7 n* E
-->
$ L0 J3 v# e2 _% ^ K8 G1 o
</style>
, [9 g4 w6 l' k% C: d
</head>
( }; Z y6 K4 S# `9 E. m
<body>
4 z1 z. C# p5 s& ?# B
<div id="pic">
4 _" E3 C+ N+ _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! h( _1 q" J$ l7 Y% u( V$ X
</div>
; I" s( I3 I6 T+ O1 p! O& h; e
</body>
( R9 K2 c0 P( x3 h( c- \, p) n, {
</html>
, s- ~1 _; J2 |
! X8 J3 [: o' h' U' q
百分比适应:
7 u* d4 n) ^) @
以下是引用片段：
/ @$ T! }) P& s; O2 ?, Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 r: r3 [7 D% m3 ?
<html xmlns="http://www.w3.org/1999/xhtml";>
! B( |5 I3 U/ S
<head>
; T) r ~7 n2 H9 R2 D- ]% w
<meta http-equiv="Content-Type" c />
1 q) g5 z% B+ y& _
<title>css2.0 VS ie</title>
" z+ B. i" k) h) O
<style type="text/css">
2 J L; P" u% b6 X! E
<!--
+ ?% E# @) K, P8 x& y6 K0 K+ Y
body {
5 B7 Y. a, f5 M) }/ r
font-size: 12px;
; w1 @! d& z- x
text-align: center;
1 F: A. ]" _, C' X- w5 p, G
margin: 0px;
6 z( h4 Q5 c* g7 ^5 V E6 W& X
padding: 0px;
$ C" T3 E2 D! y' b
}
/ r' T/ G, g4 {
#pic{
" B( u' H' y3 E
margin:0 auto;
/ l( p$ u; `) a
width:800px;
" U! e4 Y. H% }( ~: y
padding:0;
# E- f& l2 n" ?' }* k# V- C
border:1px solid #333;
( B1 {/ B+ [: Y
}
' U- H! _2 F9 A* H6 V* n3 \
#pic img{
k- C0 S- b4 \9 P
max-width:780px;
/ c* _5 y: C: A' I/ F; [
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 H/ G5 ?% a3 d4 ~
border:1px dashed #000;
8 M8 \; {5 O I/ D
}
7 R. v1 M r8 M5 ]
-->
i y: s7 B( d; A+ D
</style>
+ l V1 |9 e# m' ?: E" P; a1 | L# b& j
</head>
% c4 I- A+ y6 ]
<body>
2 K3 D" A* q- y+ J
<div id="pic">
; Y8 v) {2 \ c5 D5 j! T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) @: F" V% x* Z
</div>
2 @9 J7 I4 v$ C" x
</body>
, R( n0 s: f2 U% B
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
