标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! z# f; x3 r6 m$ x: x: P: m
关键在于：max-width:780px;以及下面那行。
! b) [2 I, l) t3 W: F! [
固定像素适应:
- L8 ^ ]0 U8 Z- ]
) o+ l# e9 X' T
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> 以下是引用片段：
; _; o+ `5 q& g$ i* z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# L8 o$ _. p" }/ K+ w/ Q
<html xmlns="http://www.w3.org/1999/xhtml";>
. I" {9 z& Y, v8 k3 k+ t# _
<head>
) I0 _8 R- f1 E$ L! I4 e
<meta http-equiv="Content-Type" c />
' P) T7 f1 D* E* [2 v
<title>css2.0 VS ie</title>
' C' q% Q$ w9 B( G1 b
<style type="text/css">
6 g7 t$ A v5 B
<!--
3 L k7 P/ C7 x3 l
body {
" X/ s4 A P' p# Q4 n
font-size: 12px;
, L2 F4 W- U3 [. p" p
text-align: center;
; g. Q* i D! @, W2 B, ?
margin: 0px;
4 I% `4 s8 x4 K; e* X
padding: 0px;
4 z8 c x7 U* E; ? ^" s2 K0 t
}
0 [6 k" o" d. a, ]0 b" i t
#pic{
) z0 U( X2 q+ d. b) q7 Z: [
margin:0 auto;
. _, L6 m( G4 h( d7 n
width:800px;
9 l: `+ F0 w9 t G" ] _
padding:0;
6 Z1 F9 P% r, D
border:1px solid #333;
0 W6 Q4 [, y" }7 ~
}
- H p9 s _" R! r
#pic img{
8 C2 A! [9 ?& G- b5 T5 L
max-width:780px;
7 N2 x. `. F- X* `: e) p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ {% r. \/ y+ D% X
border:1px dashed #000;
- u6 ?6 G( r" n( g* T
}
0 g/ l: U& ?: s" _& i7 F1 n0 |& J
-->
7 A0 y$ Y6 ~# A& F: K: S
</style>
# M: z0 Y6 [9 \5 w+ F
</head>
- o. e$ ~: E* z% U3 j
<body>
: @ |/ y$ U0 |9 p8 ^
<div id="pic">
( L1 n }5 \ ]. i8 p4 \7 O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: ^* o! D4 V: k% F8 t* ^
</div>
* |& e6 n/ J( s! B# \$ y- I' P
</body>
9 N+ {# K; C- w( d) r
</html>
; \' L+ g; w' V3 B
& D- U3 d( r& K2 ]
百分比适应:
3 n" k# [3 Z1 l4 C: ^
以下是引用片段：
5 ~7 t6 |3 s- [# h, T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: m) C7 L+ Z& j6 P/ R# R
<html xmlns="http://www.w3.org/1999/xhtml";>
. }$ x' V8 ~2 Y- O! Q; G
<head>
% _$ |3 f4 t" X3 m' e
<meta http-equiv="Content-Type" c />
+ z2 ~' ?& k" h* t6 O
<title>css2.0 VS ie</title>
4 X. {2 l/ f; G! k+ G+ q
<style type="text/css">
% K: D" m9 z4 ?* F8 }
<!--
: U/ S: e* ]2 r4 Y" i$ Q# C0 x
body {
: F8 @9 | y8 q; |8 b
font-size: 12px;
. A9 Z4 ~. I2 A' K/ x
text-align: center;
8 n) k+ C+ N7 H
margin: 0px;
6 U0 g) W4 y% D$ I& O# t2 g
padding: 0px;
l/ l) @3 P( P3 o, R$ P
}
. ?% x- N, \' }' f
#pic{
+ r1 L$ R" w& w9 z
margin:0 auto;
: y4 q2 s9 K( c2 ^" s
width:800px;
8 J4 X1 i" E, u$ a4 C/ k0 j* s
padding:0;
& H0 W V5 k v! `& _* g) {9 g
border:1px solid #333;
. F; d" P1 e' t
}
( m6 I$ \6 X9 a; E t1 C
#pic img{
) c% m) x. g6 Y; _% r1 A% _
max-width:780px;
: n. ~; u- E; z3 R8 ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- U, o3 N3 J# | n' j$ X+ U
border:1px dashed #000;
* _4 T" A+ ^" e2 D* L+ H$ A0 O( f
}
g5 P" T+ e0 Q3 Z
-->
9 i9 Z! y9 n6 g0 ^0 H- `# u
</style>
6 G1 w% Z: i' A0 C
</head>
% ~, e, t9 U/ l$ g
<body>
?/ q6 Z& v. H
<div id="pic">
+ K) t7 N- h; t( q1 h, U2 ?" `' ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% M0 [& U1 R7 u# P6 z- b. J
</div>
# O; v! g2 E0 z! Z+ o4 W3 |* B
</body>
/ e/ W+ s+ ]7 B4 Y8 L
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
