标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) y5 t8 l! o" \. D# D' @' P" h Y) M
关键在于：max-width:780px;以及下面那行。
* m3 t/ y# J( o0 g4 O
固定像素适应:
1 |7 k- m2 \# z8 ^( N1 b
( |/ I& x; c/ y0 f2 _% L: b7 ^! u9 r
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> 以下是引用片段：
) o9 Z2 H5 `9 H8 i5 v9 m6 b% j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 D, ]8 l8 \9 Y$ \, k1 W6 t
<html xmlns="http://www.w3.org/1999/xhtml";>
o, T8 T) B$ P5 l7 i
<head>
. f6 |# E2 v2 V2 R4 A0 H, t; L8 @* A
<meta http-equiv="Content-Type" c />
0 q$ i# I& i$ Z9 [5 ~
<title>css2.0 VS ie</title>
% C: C0 D Y& `2 I, E1 P6 L
<style type="text/css">
6 L5 m0 b1 d8 ~ Z, H, V
<!--
% L/ V2 l, W$ ^0 y& E0 C
body {
1 ], h. p1 p/ @/ Y6 N K
font-size: 12px;
+ v6 K+ `' q, ?6 I2 q
text-align: center;
+ g7 u) O% k- q& B4 t4 t
margin: 0px;
( e6 N/ y+ ?" u& v+ r! l+ t
padding: 0px;
4 T; s( d3 C% J" T* t! i7 L2 G
}
# |, X6 G* Y) C) ` E
#pic{
- ~9 Q$ o( `9 e7 q! i
margin:0 auto;
( e2 O* ~5 i- O6 e; j0 Q
width:800px;
8 \! U, G4 k/ p9 D8 c
padding:0;
/ y* d; N ~5 ^2 x- Y9 f. L
border:1px solid #333;
& Z' V$ C% x6 d# N* v
}
, _* _& I7 U3 K V' N9 q
#pic img{
& n, ~# I: i k8 n e* `
max-width:780px;
: e5 d- o( T6 N5 A7 |" @
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* \# t% X$ s& n2 N+ {
border:1px dashed #000;
3 i6 M" S. S! g H
}
6 Z) T- E& G4 B" y( @& L% R
-->
3 U% T; N K6 O$ N
</style>
4 q6 o: O# g0 L; B
</head>
L8 R0 M! l% g' M1 L9 i
<body>
9 n7 S+ `. ]' i3 X+ \
<div id="pic">
9 N9 j* `( Z G8 f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' H+ J3 z3 T s6 f7 l: G
</div>
" B# ^- q3 R$ r5 F
</body>
; a* z& u$ C) B1 {7 p c
</html>
: g. ~# \6 N6 u" O1 ^, d2 E
$ |/ ]$ ?* z5 ?7 R* n
百分比适应:
; _0 U6 c/ @2 ?4 B' y5 o7 G+ A; z+ ]
以下是引用片段：
- e a( a% {8 @. L! x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 |( i' T% }5 h
<html xmlns="http://www.w3.org/1999/xhtml";>
0 F/ c. Y5 w( h. \! S' C- J
<head>
6 U( O) M4 ]5 K. k) h
<meta http-equiv="Content-Type" c />
, n5 A4 a2 c/ P; N7 B5 A6 }
<title>css2.0 VS ie</title>
+ b6 E) ^0 }2 W9 r6 A
<style type="text/css">
" C$ z# G( v7 i9 ] {9 D4 v* r1 s
<!--
( l6 ^* i' a: c1 i
body {
- h h' @8 r9 K- x
font-size: 12px;
- ?/ R/ h# f3 o6 b% r7 Z
text-align: center;
: f! D* p+ W w0 @: ]% R. ]8 w
margin: 0px;
. j3 k$ |6 n8 Y/ F* e
padding: 0px;
2 V. V; Z* A e9 q5 h; }
}
$ Q$ g9 ~* V- j k1 k$ b- g" r, c2 L
#pic{
: R: t9 C* q/ r# f9 C8 B
margin:0 auto;
% l1 h. ]% C6 @2 z
width:800px;
5 a; f$ K0 {( Y/ H$ A8 R2 @
padding:0;
+ b1 g' X2 s7 C/ a& L5 d4 F
border:1px solid #333;
" `: |6 a* u; v- @+ o6 A7 X: ^% b
}
7 o3 o, M# B' ], f% q. ~4 k. E
#pic img{
# W9 [* u0 T% U% V
max-width:780px;
3 j& D- A" y+ }; N. g7 Y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 i% r: u8 N n! {4 F7 S2 ?
border:1px dashed #000;
3 l* ?; a) \1 R7 a
}
6 x& N- F) Z: N, f# O
-->
+ D. Y0 w# o% e- D" B1 x
</style>
2 j2 z. F1 @" L, ?, l; E1 z7 Y# n) Z' @* @
</head>
. V' q, _, C5 f! R: r
<body>
8 m0 U. P( k2 m% S- `
<div id="pic">
" i* Q" K7 [ e% T. Y' ^) O! @+ N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) g& V7 }/ P" v
</div>
. c' K- ? F' Q- Q A& }" q- U& e4 s
</body>
& g6 G2 z. g, p/ @! Q4 ?
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
