标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. M% j, C( R' D8 ~: N C' f
关键在于：max-width:780px;以及下面那行。
/ U! G# ~# g& _; x+ d4 n
固定像素适应:
& F- {2 B# K2 o- ?2 G+ c
. H" K4 f3 U8 D2 p
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> 以下是引用片段：
. a1 F4 b' N0 r( K; w% ?# O- K) R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% O# f+ P" D. h; Q+ m
<html xmlns="http://www.w3.org/1999/xhtml";>
3 g" h% J# i' g" @( u% J W0 [
<head>
) r: G, k, O1 s$ {) W
<meta http-equiv="Content-Type" c />
/ p0 w$ r2 [# Z
<title>css2.0 VS ie</title>
1 p Y2 Q- |1 m6 R; H
<style type="text/css">
2 F0 Z2 T3 S. u g& I4 f) [2 C
<!--
" l9 W9 U/ W9 F) B* I+ V( z
body {
, M5 z' x/ `) I
font-size: 12px;
7 E, B+ Y( e' M4 B) |. N
text-align: center;
+ I: ^4 \2 U6 d4 C
margin: 0px;
5 @* N( I: |9 \- W
padding: 0px;
) g V8 L8 |) H4 q0 S- O
}
! X. E# x7 ^6 W7 X, k
#pic{
- ]$ F# _( ?9 @, h, Q- e
margin:0 auto;
0 r% c. s( c! N4 ]$ J, u
width:800px;
Q3 i) O8 l# _ m, Y
padding:0;
3 d! s. z, p( B7 [ w" g1 Z
border:1px solid #333;
: [+ U% q" g$ y2 ~
}
1 u6 l3 J8 m) a/ R: E* T5 r
#pic img{
- K Y) A' w9 \2 U
max-width:780px;
" r8 U& j3 ]& J* p( ]* ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ @/ O" ^) D' q! f, J# H3 O+ w7 |
border:1px dashed #000;
c9 A& v: J* D' ]! m- ~
}
& u9 s, C' H" M6 e" G0 R0 x4 }
-->
2 Z) u3 z0 x6 g# X4 M8 i7 m: |$ T
</style>
3 A( _/ F5 P8 {7 o l7 M
</head>
9 K* p2 ?7 p3 {% |0 W
<body>
% }$ @5 R, x7 f) |. @2 a
<div id="pic">
: E; u+ n" }' \1 P/ v5 c
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 R8 o5 @: v8 L9 X2 q' t
</div>
4 T: `. P2 h2 D. \/ ^5 B) \
</body>
- N3 @/ w! n2 p
</html>
/ r0 o0 z! I! o8 i
/ i$ R/ [3 U+ m/ a0 @
百分比适应:
' k6 o% V4 E9 b- u
以下是引用片段：
( a: C# g# U) R; u$ n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; Q( O. Y' @- A: x
<html xmlns="http://www.w3.org/1999/xhtml";>
1 p" x, ]. Y) ?; E; v
<head>
( v; w* y1 U) z% t+ L1 h" f" I
<meta http-equiv="Content-Type" c />
0 v& ~' z) H6 b! I% L( @+ T
<title>css2.0 VS ie</title>
( s8 ]; \" j' a$ I. a9 F
<style type="text/css">
( o1 ~$ v/ r( l: n
<!--
( s# g) L# n: a; U+ A) T& r
body {
( g6 D' H' a1 `3 k! q
font-size: 12px;
9 F: H; Q6 W8 m. M) q- ^
text-align: center;
) v+ n1 ?8 `4 e' j
margin: 0px;
+ `7 P: w6 ~( d1 B7 H+ _' S
padding: 0px;
: X4 c- M3 n1 a5 g, [2 P4 C
}
. o+ P6 h6 u" [) k1 ^
#pic{
/ l# a( Y) R" G! T9 L9 Q
margin:0 auto;
6 o% y& s$ `) E& p$ X
width:800px;
: M& o+ c) N( U( L
padding:0;
V7 {% C) @6 y5 T3 K/ f
border:1px solid #333;
% y* H1 C5 M! K
}
9 ^7 u; k! r9 O5 T
#pic img{
3 z7 F8 m% n3 J; V. ` D7 J) P& N4 R0 D
max-width:780px;
& Q) m- V2 r' }& ~' f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. o+ r2 Z; s0 B4 L( m( W- r
border:1px dashed #000;
9 q* G/ ^$ \8 {' x+ y9 N/ ?) j* p
}
1 X6 p2 u: \+ E8 g) ?% T
-->
# R( s9 H( F$ U
</style>
- j& V( P5 X; D* J: J/ g
</head>
1 W$ _ D. D4 [1 |
<body>
+ k& f! e/ t: y8 i- v
<div id="pic">
9 U3 |5 l" f, m3 e& d
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( b. g0 _# @, F% g
</div>
+ k: O1 }1 c- v6 a' X$ N
</body>
& h5 B8 b0 n1 |7 y
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
