标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, D, v4 {3 e, [6 T& e: V D
关键在于：max-width:780px;以及下面那行。
5 b8 r1 o" ]+ Q+ Z4 c
固定像素适应:
; q9 U+ @- z$ ]6 Y& o8 h. {
; ^. \" C1 u* H" U% F
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> 以下是引用片段：
/ G" Y/ E. x. J2 N% }; p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( h: W" l8 j# y* [+ g9 z1 F
<html xmlns="http://www.w3.org/1999/xhtml";>
) N: L9 |7 e4 H# M4 G0 u" o
<head>
% E$ H9 O$ s) B) _$ |, g& l
<meta http-equiv="Content-Type" c />
\9 e3 R9 R( K
<title>css2.0 VS ie</title>
. t/ w7 Q1 n& f S7 H/ d# O" N* c
<style type="text/css">
- n+ S+ J$ v0 g' p j* S
<!--
) H& s+ L2 M* M; z+ t6 C, f) E
body {
2 @0 `, N8 e4 @6 s
font-size: 12px;
: N/ p7 U0 p9 b: M7 A
text-align: center;
% N8 u% ]7 I5 h! M+ Q
margin: 0px;
) ?5 e8 E5 J Y" r
padding: 0px;
& ]7 X, d% N9 S6 _' A
}
! A- t! q- u: \. K; F: F4 N
#pic{
! K( ]) v$ a) [* }
margin:0 auto;
& X$ t, [3 `$ N" E; `& o
width:800px;
5 y( m8 v! R8 i! c# ~- H
padding:0;
" Y! ]3 C! y2 V$ @; {. W
border:1px solid #333;
, l* n8 h7 s/ Y+ |: @& J8 W
}
; a4 L) z7 z; d$ H/ x
#pic img{
% [* X' h# @. w% ?2 F) ^2 V
max-width:780px;
) W6 y8 k2 _* V3 U& X
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" h: g# V0 Q$ R J( f* T% b
border:1px dashed #000;
0 X0 w8 g+ t: D1 D- o o
}
# E& _, H3 K& W& k0 f# M& l) l
-->
! |/ `( T8 x/ H8 s
</style>
; O! ^' s& `* }6 z- t5 H
</head>
! I6 c5 ~' F3 w' H
<body>
" E* a' q# l8 R
<div id="pic">
% D/ N3 i1 z0 h7 [1 D5 w
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. g- U# C1 Q0 N- \2 [( k, B
</div>
4 G1 f" ?% K+ e, c( C- }
</body>
; l. g0 y1 L! a4 T$ W. R% d
</html>
; {8 m: s, n" i* B [
2 p. s. x9 ?- ^
百分比适应:
* L- v, R; ]# ]& B3 A. |2 D
以下是引用片段：
" p% E" _5 c' e( s" c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 p. o+ x" d/ E
<html xmlns="http://www.w3.org/1999/xhtml";>
0 G j0 ~. @$ a5 A
<head>
% R' ~- V: w- n/ @+ f
<meta http-equiv="Content-Type" c />
/ }, F, G9 O+ w# h
<title>css2.0 VS ie</title>
: f4 i2 J" w/ m& T& y; L& O3 {: }, X# x9 ^
<style type="text/css">
$ q6 e( h- N ]" q
<!--
& ?$ ^: c- v# O: b5 ]) N
body {
6 K8 ?' z1 I( A; X
font-size: 12px;
" J1 `/ d, h3 o: }. g7 Z
text-align: center;
' e. w0 q3 d9 q; Y4 z
margin: 0px;
5 N; H4 J* ^/ L: Q: n
padding: 0px;
2 H' K0 i; ~+ a3 z) G. c! Y
}
0 u5 X$ ?8 Y3 v! m" T. J8 j
#pic{
$ _; _- B; q! b+ \1 D
margin:0 auto;
+ X5 O( C$ c( I2 }
width:800px;
1 O6 b/ c2 E [ m* H+ l3 e7 ^
padding:0;
! ?% N0 _7 ^6 K& U8 S
border:1px solid #333;
6 R! E# D5 t1 q6 z( {( v
}
; k" s( z& U: ~( C6 i2 e* X
#pic img{
4 `8 v$ z- O, p- D
max-width:780px;
" W) j$ y5 Z% N9 ^( B. u& q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 J, @' g/ z0 Z2 [- r
border:1px dashed #000;
# ^+ _3 i/ x' w4 [6 [3 q! @
}
, x* D9 P6 P, I( p
-->
! {* g) B# p; v) O! g3 j$ [3 P+ b+ C
</style>
$ e* Q; ]) e$ M5 \+ q& O' W
</head>
( w3 y: [9 G8 s' p* h
<body>
7 K" ?' q3 c5 Q- D& M+ U+ V
<div id="pic">
8 D+ x& v5 h |! L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 C1 e* K% G# W7 r7 h& E, b; t% B
</div>
. c$ h+ P6 W x) N# z3 r
</body>
& B$ \# j( B, f3 m) }9 ]; ]: `
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
