标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 P5 M7 e# K: P5 F
关键在于：max-width:780px;以及下面那行。
4 Y- v5 I3 g& ^# r
固定像素适应:
% Y, R# ~$ a j+ y; O
; g) E: I4 u: B
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> 以下是引用片段：
/ f. s d) r; D& ^3 _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' [/ Z3 u" b: X$ F" d ~: C; J2 B
<html xmlns="http://www.w3.org/1999/xhtml";>
, ]3 Q3 f' H% X2 l6 J/ {
<head>
9 {9 B8 y2 y5 j% l8 N E
<meta http-equiv="Content-Type" c />
C- R- b6 q4 \( K: x: o" O
<title>css2.0 VS ie</title>
* y9 H: |4 _: i5 a! a1 S3 i3 `$ E
<style type="text/css">
+ l8 ]! v! ]. d, t6 d% P
<!--
! D# a' q7 [7 T2 T) G
body {
0 I& d) f5 E; ?
font-size: 12px;
9 q7 k4 _" J9 Q n5 o) S2 T
text-align: center;
6 t6 I. N; e5 z
margin: 0px;
6 `8 r; `. f$ _% q( S$ Q0 s6 a: H
padding: 0px;
0 l% c0 z2 V8 [9 Z8 B; N: A
}
: O% O' q2 p% H T
#pic{
* ]2 }! J+ y( Z% m% C* W. u# P$ M+ z
margin:0 auto;
& F i( p; P F6 y
width:800px;
$ D& l( [$ k& v i
padding:0;
( ~& f+ D/ Q3 V7 m$ o8 Q
border:1px solid #333;
2 j5 b% A) O) U3 v7 Y7 N
}
. G: \6 M+ l! p; f
#pic img{
5 s" G* }2 B% d9 Y6 Q
max-width:780px;
0 e ^5 K# F7 F" C5 Z8 a
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 Y. u% g9 q( j% o
border:1px dashed #000;
^2 {, u" `3 {7 b+ d: l- ~
}
% r2 S6 V& W7 W+ d! C' E
-->
4 V( v; U1 x+ S" j" {0 ~2 l; C& g
</style>
8 h, S4 J' ~7 ~, w t, j& g% D# {
</head>
$ R1 L% j$ T$ N0 Y `: ^
<body>
' `8 \+ X+ A: x) H
<div id="pic">
7 C3 C/ ?- {9 Q- |/ U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; s5 ]0 O) Q5 H2 {
</div>
8 C- e# {7 [, i" a% H( c
</body>
' `2 {$ O. ~% h% Y' l; a+ ~
</html>
) U0 [% U8 L" L% p; ] i9 w3 u9 @
_$ u/ [+ B8 v) t1 a
百分比适应:
3 o- R' Q* {4 }1 r$ _8 q7 c* C
以下是引用片段：
' v) E* P- C5 W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 Z* y1 p& F: v A2 V$ }
<html xmlns="http://www.w3.org/1999/xhtml";>
F3 G3 s: \( x9 O- o% K! M; _& y
<head>
4 y8 m+ q: F; J; W; p
<meta http-equiv="Content-Type" c />
* H: M% A3 d+ r4 j
<title>css2.0 VS ie</title>
8 W! j3 |4 _8 ^2 k3 _4 K2 D
<style type="text/css">
& e% P, G' f5 b7 C8 [! `& y; v; Q
<!--
! c2 C! e3 y% w% E
body {
" b& F' Z6 M+ \ X" o# d. }* F
font-size: 12px;
h) O: y8 S7 D2 Q
text-align: center;
5 K, _; X0 i- f+ t" C$ H! o3 A) G
margin: 0px;
) ]& o9 h3 y) M. m# X& H
padding: 0px;
- K3 J+ V+ j. j* _/ I. E' u
}
7 g5 w. |! K# Y# m
#pic{
+ W5 i; `5 z9 w+ N* n* U
margin:0 auto;
5 c2 T+ z$ P+ o0 {3 U1 ]' h9 ^# w
width:800px;
: ^& W! a" r4 B0 G9 Q
padding:0;
: g' t% l. H0 ]0 s& U+ |0 r
border:1px solid #333;
# L4 O$ Z' N3 k: O1 B$ m& m, Y' I
}
6 x. A( r1 f* R2 C+ v( r/ T
#pic img{
% `/ m2 ^# v/ r& t" w3 z/ D
max-width:780px;
! v8 v! d- f. P7 G
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 h2 W$ B. M, [1 s* e5 i9 ]1 B
border:1px dashed #000;
. A$ g' R$ \4 f4 b9 M f0 l
}
( o, |. ]1 O# g. ~8 e# m3 k6 s9 i
-->
3 |" w+ ^+ `5 z) [* f( S
</style>
' `6 u% U9 S; g X4 i+ V+ W
</head>
" B2 _2 X1 w, ?# |
<body>
7 \ w0 J6 b* H; e( G$ _
<div id="pic">
) m. D% S3 }' j4 X* |0 f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 e0 @4 M6 A _
</div>
2 A# X% x c; @- l( F! ^% Q* G
</body>
' J% L, y P, |( }2 d
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
