捌玖网络工作室's Archiver

admin 发表于 2007-12-8 14:55

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。d}3YO1S DBy
关键在于:max-width:780px;以及下面那行。\5a,O&c.@ S h
[b]固定像素适应:[/b]
`,JCbUJ_ +M dm$F3X
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>  以下是引用片段:-?Iq7ee(|AUW.j4j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
S n%g/xxpK%f&| <html xmlns="http://www.w3.org/1999/xhtml";>
M5YB+w#C?+UA6B <head> !`3l w;?(} ` C
<meta http-equiv="Content-Type" c /> +R^0`N(\7c;F-K~
<title>css2.0 VS ie</title> V.s;P$WA,|
<style type="text/css">
5u OYn/@R0Q <!--
&{!ide*_%hK-p body { G.[1zW u
font-size: 12px;
'O+V2z/@L6s N#n text-align: center; &ow1Bkg;w Vs8[W9q
margin: 0px;
]`A_3BD3GD padding: 0px; cy3l _+Zf#b3{?
} Bn [_'Bj#QK8x
#pic{
8}1o%n mA6i   margin:0 auto;
wc1iJ0hY:t   width:800px;
2d'O;d}6xD8a"Hb   padding:0;
e-z,JP6a7\Ys\D   border:1px solid #333; ,xK)z(U@
  } 9N*_ IX+yy'NN
#pic img{
pk5g:x#mL~!Q     max-width:780px; w q#Dfk2NR{&h
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ~k$]}}\
border:1px dashed #000; T9W w;W v"[&w,W
}
a2U8Jihwt Bo -->
ZD1[+AL2q </style> 4t~#o[.Kv.{
</head>
2hGT(f ^Y(Z8X <body> (jIZ)h[
<div id="pic"> :n"_vp+a
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
xs;jX1N ^5E1G </div> )]L3jm(V3@
</body>
'l\xZ9va3z </html>
a!OU"_[S1Jr!c(O(ZV0A
/d/ugD `]$\ 百分比适应:
0B%o,jbq$o 以下是引用片段:'| bV4zW\l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
L |&|9[U!`y <html xmlns="http://www.w3.org/1999/xhtml";> .rn5|/VAW[
<head> &h{4T~2pwr9JF z
<meta http-equiv="Content-Type" c />
7Nb1~8E-e-K6d%d <title>css2.0 VS ie</title> "v9E%zdK
<style type="text/css"> kB8K9i*v6YyG'S;V J
<!-- $v1C"l6T Q7^TCARj
body { 3t SO0[(p*@w6h
font-size: 12px;
v#hn n]Q#EX#f4QV text-align: center; T9rr\"~p1kq*qN+o
margin: 0px;
J-SP7PVC6c padding: 0px;
N-y mI] { z z }
eF0Zza8`%b)H #pic{
AUOwB!Y|5Pr   margin:0 auto;
@j;S,S0AQ\k;]   width:800px; _F;zVJ_a
  padding:0;
*ma!?h!`6i   border:1px solid #333; ,M6wPInLe!R
  } ku2NbX2gK9Y
#pic img{
yY?qCt A6C     max-width:780px;
-D,XI M&U6O:pa width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); I$u9y!V&J^
border:1px dashed #000; t5r$n3n6cM
} 7F/\'u0?GR
--> ;_O_,{j3g
</style> w8Y,Kv)H.W V
</head>
z%?7G%[} <body> o-F,H#p;z
<div id="pic"> O5YY_X X-Ge
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> `9w4v%g7p`
</div>
"d W u_KhL!z.N </body>
'K` }O4R)`"N*q:M2k4T3{ b </html>

页: [1]
【捌玖网络】已经运行:


Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.