标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) H; O. z3 L; h. w$ V, G
关键在于：max-width:780px;以及下面那行。
. D/ L! S* v( c* O* U
固定像素适应:
7 j& V9 Z. I, F2 t# J& q( S9 T+ W
" B0 S4 N9 i0 S* n; j# p/ J
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> 以下是引用片段：
* w$ {0 Z2 x$ C- [* e7 z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, N; R ^' X/ ]. _0 m% I n
<html xmlns="http://www.w3.org/1999/xhtml";>
, n; ], B# r, T5 x7 b# N
<head>
* r; [: s: `- U( ?
<meta http-equiv="Content-Type" c />
5 T: u- c$ {) U5 |, T
<title>css2.0 VS ie</title>
4 y5 k- e( G0 o9 s) C
<style type="text/css">
' L& d- W( c6 J- e& K3 S
<!--
/ Y0 w8 Z6 P& f' v# y5 o
body {
6 ]: ]: y5 I, z0 Y7 D
font-size: 12px;
0 d: ~+ R6 u/ j3 \! }
text-align: center;
" X, _; N' j" u
margin: 0px;
" s% r2 S+ I& v6 y9 P( `5 E3 {
padding: 0px;
* i9 f* q! }/ Y, w
}
2 q. X7 S! V# |$ j4 ~& P
#pic{
3 ?' [7 X- p0 d
margin:0 auto;
l/ U. q: D1 X1 j; C1 O. M4 E
width:800px;
* m" w% H0 D; r/ H% }1 r {% q: H5 X
padding:0;
' ~$ h$ _& c, ]) ~
border:1px solid #333;
. }0 C! r# a- f& R+ r; ~7 N& L
}
2 I1 |* @+ Q6 H6 L4 ]
#pic img{
2 q$ z* \1 C/ Q; c6 C5 ]
max-width:780px;
" o4 Z% O. J0 @8 }: I7 Z1 y) m
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 j. C0 `4 n( V, [
border:1px dashed #000;
! U5 Q7 L' P2 t
}
9 a) C/ \1 R9 `( C
-->
/ L% P4 F+ u2 I1 H1 v% q) i- u
</style>
/ c* o0 T+ Y8 M4 {2 K
</head>
6 o& @' Y1 q+ c$ @! d) S5 I8 H$ A
<body>
0 Y# T2 B6 h! ^( m, {' z. {# n
<div id="pic">
7 x9 M& e5 h( J) g0 k$ g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 q; I V) M6 f) Y7 T9 t
</div>
- X' c$ J5 R* q3 h* I
</body>
, \' r- N2 D4 z8 P! N) F
</html>
% [: W! M. d( ?& \5 m' m; \! i
" P, \5 K. s# w
百分比适应:
7 A+ |) T% H# _: E
以下是引用片段：
0 l+ p* W/ J3 |7 {+ p, } \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" q) G# b4 U) c- a3 g
<html xmlns="http://www.w3.org/1999/xhtml";>
- `7 j6 E O8 A! l# F
<head>
2 J) e1 ~) {( I+ |
<meta http-equiv="Content-Type" c />
) b3 U' l! \, j" W1 N$ ?, z
<title>css2.0 VS ie</title>
8 g& u: j) ]6 a$ w" k8 r; F8 a
<style type="text/css">
% Y% P! B( J# ~9 x) a b/ \+ h
<!--
- G* O8 q6 ~/ k( h2 j0 Q
body {
- f% O1 x- ]( A; J: S2 p, D
font-size: 12px;
. |6 h" Y0 P9 @) J1 z$ f) s- N# G
text-align: center;
+ t: Q, G% Y* w# H2 `
margin: 0px;
4 t, s. ~ _8 H4 f) s- F2 o
padding: 0px;
8 f6 w4 O% X1 [( O9 P
}
* A- J; ? F) _( O+ B- `/ o
#pic{
1 ~/ ^) e2 W) o
margin:0 auto;
, w* J7 J" O0 L% s" Y: U
width:800px;
8 q, I5 F9 m. W3 T
padding:0;
- _) y" \8 p! l0 e8 t: _
border:1px solid #333;
7 z; X: y9 q! U2 C
}
/ [' V" s, ?5 a) i2 Z% B, _/ H
#pic img{
/ W' U x, R& _6 [% r1 s
max-width:780px;
2 O2 s9 g0 }6 c; `$ Z# _; @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. J! `0 ? w6 {
border:1px dashed #000;
+ H4 B' d. K( H0 ]- b$ J
}
9 G% c$ O6 z# G q
-->
* k/ m/ j) y8 v3 Q
</style>
5 H' [' \4 K1 C
</head>
/ T+ x* X9 r j2 u
<body>
, \. r' `% T6 p6 V
<div id="pic">
) b: K, t, p9 Y" d* }& O. O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 F* l. m' `9 N! T. n% [
</div>
* S7 E3 N# v& P1 L3 u' R- m4 ?7 Y( U
</body>
5 h o! D& O9 E; q- D" T
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
