标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ u" d% c. F/ I$ Q$ l7 K
关键在于：max-width:780px;以及下面那行。
% | w' Y9 j: [! i, r7 n
固定像素适应:
# l( I/ F) f& A
# W7 W) `& f$ H _$ `
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> 以下是引用片段：
7 E$ B6 S0 |7 H c) m; E8 S7 ^0 h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- A4 F u0 u( B
<html xmlns="http://www.w3.org/1999/xhtml";>
( J6 D& s5 b. Y4 S
<head>
1 u3 Y/ x* o+ P& L9 [, d
<meta http-equiv="Content-Type" c />
5 m! l6 F1 Y, d/ C5 n
<title>css2.0 VS ie</title>
# P! f" G2 B) d3 k# }
<style type="text/css">
1 b6 X. @$ [ u
<!--
U: T' y& K+ m" M# ^7 R
body {
0 t8 X& l4 w0 I2 H
font-size: 12px;
- |' V4 e) b B% _: c8 p
text-align: center;
: Q+ v# P# G. ~
margin: 0px;
4 o# D+ h( j. {! z) V$ R" [! L
padding: 0px;
+ M7 H) T8 X8 Y: Q
}
, I( r- ^8 I$ X
#pic{
5 s: T6 q2 e( M! m
margin:0 auto;
8 |, g' T' H9 M0 z5 @6 `
width:800px;
! r/ t7 E# I) A; t, Y
padding:0;
7 ^" C. h8 X% T H' S' H
border:1px solid #333;
2 M, f X3 _' E0 x0 V: i
}
/ W% p) p6 t+ ^' }+ M+ s6 I1 T
#pic img{
6 \& `( C( s: Q8 P. C! Q
max-width:780px;
0 M3 E4 P& O* [0 S, N% Z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ t8 i; S% X8 a
border:1px dashed #000;
. z% A. C/ j$ ?6 ?, e; d0 s$ L* ^
}
9 g- z# r5 ~1 ~' Q z; D# i( o% F
-->
9 P. f9 X2 P3 l) y1 _
</style>
9 k! z- f! Y! A. j, m
</head>
! ]. a% x9 v6 }$ O. X! | h/ a/ @
<body>
+ k. K6 v- r: e( u- U
<div id="pic">
( y( l9 {( f6 z! \6 T) K: Y' |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 m' W. P+ J- H, u
</div>
- {9 R9 O- y: G# \1 B
</body>
# q8 O7 c6 t( I' Q A
</html>
5 j9 [3 I: ^8 ~7 z4 ^' F
# j; _" U) n7 c
百分比适应:
5 }$ H, v {8 g- e# ?
以下是引用片段：
0 F, _( W, z8 k) W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 d+ B5 Z8 {) l0 O2 |
<html xmlns="http://www.w3.org/1999/xhtml";>
- K1 G( W6 j$ l- X* O. |
<head>
0 y" x, _8 M' M0 U
<meta http-equiv="Content-Type" c />
" d* f4 h2 R0 |2 l% _' j
<title>css2.0 VS ie</title>
5 X, V' p3 {0 n0 e* \
<style type="text/css">
" ?$ m- i! W' Q' e! _
<!--
3 {! ~2 Y# B; x* v- T
body {
# l/ M. f4 ^( s6 R! e) D3 F* c+ }% A
font-size: 12px;
1 Q8 ^# \0 ] Y
text-align: center;
) `' m' D3 Y6 P. r
margin: 0px;
% l9 \" F* F s y
padding: 0px;
2 M: x, ]& K/ r- Z1 @
}
& x% Z8 n" N- Z2 [# n3 }
#pic{
8 o. o( S2 t3 e! _3 E3 O' x
margin:0 auto;
7 u/ u- c/ ^9 B3 A
width:800px;
) y: L6 H5 a: Y- x+ f
padding:0;
9 ~! _6 h- e- [5 r
border:1px solid #333;
/ f: S8 }; z j; e o: `" l
}
: j6 Y+ b6 D2 n( X% ^
#pic img{
' Y9 t# z- h+ z' O1 V0 y
max-width:780px;
4 h! u6 R2 ^6 N7 P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) C/ u! g, n9 ]
border:1px dashed #000;
9 D* _. ]' F1 k
}
5 I2 Z! f! C6 e2 R4 ?
-->
% _ \9 {8 P) u& m! ^1 n
</style>
8 F2 q& `7 j: |
</head>
# j# j' F& W; [2 h, Z
<body>
& a7 q" a' V6 V0 r
<div id="pic">
& T, X1 x: I' W, C q- c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) ?# X. n [$ X7 E7 Q8 v7 j
</div>
7 N# [. O5 t8 z( o6 D
</body>
9 |& D2 H) h0 f6 C! ^
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
