标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& C& A4 v' `7 A4 E6 R
关键在于：max-width:780px;以及下面那行。
" @2 N5 y7 E1 h; H7 O
固定像素适应:
( L$ W1 {' A9 r/ C4 {9 d
# Q# |) r5 k8 U
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> 以下是引用片段：
5 v5 v; [9 j/ r) U1 S+ o/ p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 _" B: `0 }8 b& l$ m1 y+ X) o$ e! ]
<html xmlns="http://www.w3.org/1999/xhtml";>
: r6 l; G! x0 B) `% \
<head>
' \5 D# m) m$ _* L8 N
<meta http-equiv="Content-Type" c />
4 z% W" F% b2 `* j8 u; f7 @
<title>css2.0 VS ie</title>
- u6 O' W3 C! b# m& W$ S& c' p* z
<style type="text/css">
2 d& K; r; E8 t. |. h& j, R
<!--
' U- E# U+ {. s$ c
body {
( S. K) _; l% {. M
font-size: 12px;
% k" J) \8 f b
text-align: center;
: u4 T) ^2 D$ c2 p
margin: 0px;
* `7 o7 o$ S( @5 s9 H8 F6 _
padding: 0px;
+ Z. L) Z( r: b& g
}
! Z/ s Y! }& W. E* h
#pic{
. T* y$ T* {5 K2 b% N9 P- v; S* r
margin:0 auto;
* W" R) C; {% H V
width:800px;
+ c Z% g. x0 l' k
padding:0;
0 e+ t& b0 ? ^; t( v9 Z- L
border:1px solid #333;
9 i. g% X- @8 e# F7 F6 o
}
+ H# ~! E7 `, }6 `* E4 K+ |
#pic img{
: {. r: `, m# e" L/ h, O2 E
max-width:780px;
. W/ d0 g7 g* x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* p) |/ r5 K; g1 [4 k, Y S
border:1px dashed #000;
8 S+ p4 n0 U' Y" k
}
3 Z- P0 A5 ^2 g2 h" M. j1 d- x
-->
$ |5 f. W, f% c/ @9 ^2 p
</style>
1 @' Z) |/ |' e+ W9 i
</head>
$ p0 W, S! X6 q" Q" r5 L' V
<body>
: }5 t8 p) T' |
<div id="pic">
# h) m6 o& C" J$ E$ m' a/ M% j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ A% J/ B$ e D
</div>
# [5 |7 x9 b0 X6 F3 w
</body>
6 g! u+ ]. D) G! O1 L
</html>
) d& X! b. S6 b) G
* C M( u0 s3 t6 u0 K3 W
百分比适应:
! E0 ~: n6 L$ u
以下是引用片段：
& e3 O! E$ F8 i8 y" b$ O5 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% t3 d3 S% f' o( \! K
<html xmlns="http://www.w3.org/1999/xhtml";>
$ F# } U/ X, {8 C, v9 ?7 |
<head>
/ u4 U% k& _( R3 T! g3 W
<meta http-equiv="Content-Type" c />
: E0 u" ?1 q% J$ {% m8 v* c/ @ c
<title>css2.0 VS ie</title>
/ M6 a# ^6 p6 g1 h% B. h
<style type="text/css">
; m7 {$ Z9 U! E
<!--
6 {# c6 ]( X# o% ]& p
body {
- F6 b& h6 F& e% G; b8 s( O
font-size: 12px;
6 ^4 _. k8 ~( c" q: T. W7 g
text-align: center;
: ], s3 s- A" u6 V% ~( F
margin: 0px;
2 t! `1 J! z# m ~# l9 |
padding: 0px;
- F' h1 y4 C9 L8 n6 j
}
% y$ r; l, k4 ?0 O9 A
#pic{
5 o; H9 i* s8 l0 ^3 y9 {% L- h; N
margin:0 auto;
, b0 s$ T9 L3 n2 D9 u R/ D l
width:800px;
1 z! ]4 \ S Z+ q3 h1 v
padding:0;
6 U/ G. f% a; ]# V+ W/ W
border:1px solid #333;
: z% z- l8 n6 `1 V7 e( D
}
$ X4 Y) w3 R6 J* B0 Y
#pic img{
7 h5 S2 T" j& }( ~: Y7 Q4 Z) Y+ e0 Q
max-width:780px;
6 k8 ?0 j; }# Y" c6 \+ S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" ?0 F2 f3 {1 K+ ~
border:1px dashed #000;
2 W( N6 E& a6 \% Z0 O
}
- b4 k& G' n, O8 z" ^% \3 U6 T
-->
. s3 x& T- b2 w; \# ~
</style>
( W; x; @, ~& ]/ G; E6 X. E
</head>
3 Q4 @7 Y$ O" g9 W ]$ F: J) z
<body>
7 m0 o9 y+ L" _: s: w8 s, D% [" |7 r
<div id="pic">
6 E& f0 V% {, [# D6 U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! y. Z: n) [/ v1 T$ _0 C7 d
</div>
4 {' a7 E# }9 @, {; w% g
</body>
# L. X \" m( m( e# r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
