标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 b- N- V7 p; i5 W X1 Q( r. G
关键在于：max-width:780px;以及下面那行。
9 |, A% h: ^- a8 W8 L* ?
固定像素适应:
0 o0 F# o' T+ [$ R
0 Z2 Q: ^8 _+ G
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> 以下是引用片段：
- y8 r1 ]6 ~9 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- T7 J$ |$ Z s
<html xmlns="http://www.w3.org/1999/xhtml";>
# u( g6 ~+ |# b+ c, r* [* \
<head>
3 V$ i" P k4 E5 n y
<meta http-equiv="Content-Type" c />
* a% A0 k( R8 l7 O
<title>css2.0 VS ie</title>
( I2 k3 u+ F9 I! p$ @9 x) q
<style type="text/css">
' u+ A) l- ^/ b3 @+ p: Y# u4 [
<!--
3 _/ ~ g; p* X) `4 [) N" H1 z
body {
, q1 I7 X ?0 e7 g$ h
font-size: 12px;
6 U% j0 n) U& l& ~5 n
text-align: center;
& p2 b& T* V! j# D" r2 p" F1 t; Z
margin: 0px;
) t8 e$ y5 L, i! k
padding: 0px;
3 A6 u$ T" |! B7 ^
}
5 S2 m6 j# n% l' f0 `# E* t! N1 w7 U5 X
#pic{
+ u! o3 o8 a3 `8 T' V8 \
margin:0 auto;
& I, ^: N7 ~2 k: K# O- V" a( J) U
width:800px;
. {( X( z) ~ D9 N9 c9 K; f
padding:0;
- }2 G8 {' _5 o2 j
border:1px solid #333;
7 R* O& N- J8 F% C* A0 z' L# K- `
}
, E2 o/ M$ E8 Y; i3 x5 u3 M! F
#pic img{
/ [ p" _6 \6 ~+ s* ]# _
max-width:780px;
: [' c5 R: M$ ~) p# l$ z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; r# v8 [7 ] X0 i5 Y4 i! Y
border:1px dashed #000;
* S5 D4 x7 x. @
}
& J. b% \8 Z* R/ _$ a" g6 g
-->
5 J0 G; h6 J) h% J C3 @
</style>
8 h7 c+ r' n; O6 I& u& D3 Z
</head>
. Z+ l$ B( n6 A8 `7 Y. H) {( n
<body>
' s2 K! N$ v% g+ g/ v+ B; L
<div id="pic">
1 c$ V8 g0 c: P) a0 p
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 f' P2 m1 l% q& |) v( R
</div>
4 D6 T9 r. T' d" z5 K: T; }. s7 C3 |
</body>
! i+ \: b' n! w/ Z2 u0 U/ z- B7 O
</html>
, K5 v8 O- }- N# d' z) y( W
& U( W0 Q! p) O5 S$ B# d) o
百分比适应:
t9 e- T3 `7 z% U- L3 J$ R
以下是引用片段：
- p% \1 H- \$ A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ Q0 _& ~5 N8 o: O
<html xmlns="http://www.w3.org/1999/xhtml";>
2 ]/ J+ P# @+ J6 j& W: n1 x
<head>
! |% I3 V) x/ k! w
<meta http-equiv="Content-Type" c />
( ~1 I, u) p% w9 [/ J
<title>css2.0 VS ie</title>
( x$ Y4 P0 p7 \' d
<style type="text/css">
0 ~% H f. ^5 U8 F
<!--
) s6 r x; g/ z0 W) s. E
body {
7 ?& m! l; _1 B' j0 F
font-size: 12px;
M7 Z) z6 a4 k+ Q. A
text-align: center;
8 i9 V( F, S1 |2 I
margin: 0px;
- h% e% c }' ?2 s- N
padding: 0px;
* K1 M7 b) h2 m: W+ _1 Z8 A
}
7 O$ G& Q$ `3 |- A4 p. ?7 ?
#pic{
! \1 ~: s ~5 z# i
margin:0 auto;
- B4 o4 }3 q) c, l
width:800px;
9 d# v7 l2 W5 `) x: e
padding:0;
3 R( V: H5 J% \* |3 Z( j
border:1px solid #333;
' ?! s: o' _/ v& o' V! ]
}
( _. B5 o; T) n! a9 B5 i" e
#pic img{
4 N# b4 Z0 c3 p8 E
max-width:780px;
$ t' D" o1 v& I: p2 q/ P; I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 \% A7 i5 E, z/ p- d L1 u! t& x# r" D
border:1px dashed #000;
7 }- i4 F; \8 k B4 c) ?
}
( `$ A$ I; m8 D$ H3 v
-->
5 ^' C* K7 _2 m! e
</style>
' f8 _; {' G& @! e! S `. d
</head>
; i3 d8 n+ i4 g6 T4 G+ _
<body>
2 C/ R1 t3 }* x6 U2 c4 v" j6 J
<div id="pic">
7 D! Q/ H( P l4 Z/ E8 F4 p! G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- _+ V0 v! H' R2 d& q; P; U
</div>
+ S# @1 o: m. Q+ U+ Q S! v1 p7 A
</body>
/ p/ j5 A5 E; v5 K2 A" }$ U+ h
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
