捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
Bu^~psrT 关键在于:max-width:780px;以及下面那行。
*\c)J [ P'}t%v A0[+q:E [b]固定像素适应:[/b]
/B5G&d rtN3e/s L OV#]-b6q1o y"k
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>  以下是引用片段:z1\&i^3a#P#J*E {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6BQU].O a'\C
<html xmlns="http://www.w3.org/1999/xhtml";> /rH;r&EEMJ
<head> .z2P5HY8^D
<meta http-equiv="Content-Type" c /> f|1z [e
<title>css2.0 VS ie</title>
Uoc G.ud,X M1f0x_ <style type="text/css">
^'CMT-D <!-- #J,OD-pq e4fS
body { p vb4j4h"R$u JY
font-size: 12px; !qo:Jn2p6R |2H%E
text-align: center; | \\U:fh `Y
margin: 0px; ~&TcxCfd1R(TA
padding: 0px;
)sMY4d:r1P!\ ] }
9V'[5T"qw)jB[#i? #pic{
7RSi2a W!\3l+@`h   margin:0 auto;
I;a ?N} Y z   width:800px; DzKS#L"o
  padding:0;
X hhM mT%q   border:1px solid #333; |6qcg1WvQ;Q
  }
{;{&`t ZR #pic img{
9^fg{vyR     max-width:780px; :HNm)M9Y
width:expression(document.body.clientWidth > 780? "780px": "auto" ); w T/p$X pB
border:1px dashed #000; pa(lS(x
} t ^:k4j |w.w
-->
.q~+~1^ w1U(U </style> S8d,p0jA$ew
</head>
6P3c+Uf gnn!r5DiM <body> t.k,W7r@
<div id="pic">
xn~)Gg;s_ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
:QF7f5_,oW ^ </div>
g'C1fwL"M/R9xP </body>
N3sVx${ P2bP%e+jYJ </html> up*uK AX:Q b
RT J'nAU JU;[
百分比适应:td&O{ EF,sD
以下是引用片段:U7sbh)O9H1j#a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
p0jyAx"T <html xmlns="http://www.w3.org/1999/xhtml";> #I%ucC.\3TU
<head>
uF-Ua)T!^ <meta http-equiv="Content-Type" c /> F {4wt\o
<title>css2.0 VS ie</title>
hV,QCd._sG <style type="text/css">
VVz6Df7GUD <!--
[O8p y9C~8~C body { *u"tH|tW
font-size: 12px; z so/H"? pWc
text-align: center;
^:qJ\9rUikH sD0~ margin: 0px; $|`&JFYM}Zf
padding: 0px; Q3aepg*CPC
} 'Wz NzNIl ]
#pic{ CQ7w6P g5sU"u?| a
  margin:0 auto;
!G,D+W|%H   width:800px; cDE!G'o0\w
  padding:0; i,B,y UI)y7c1t
  border:1px solid #333; 4C!b$W1Tr7}
  }
]Xvn$wgr` IUN #pic img{
7hOF;~ @$c     max-width:780px;
Qzn,_-X6\!K width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); _&Q|O-}H1x
border:1px dashed #000;
[ GI] m8Rv#Tp } $E'l(qa d&Fu-N
-->
_:D${)S9p SNB </style>
+Mf+A$_+ge%g </head>
3}#r| zo9Gx8_*I%f)h!? <body>
:UXFG Y4x <div id="pic"> -Xk0W.jMX8W
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> t3vbB go
</div> I0v"aKE _ Q
</body> %tO^(q-Dfy9\5I
</html>

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


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