捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/[J| B#{#x 关键在于:max-width:780px;以及下面那行。
&`EC4k,^`,t [b]固定像素适应:[/b]
3[I}X(TU*o{
/_mS)sscHDDJ 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>  以下是引用片段:5YDA(?6q&y!TO g'{Gh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8^4m"Qi8^4p/Sjd.D <html xmlns="http://www.w3.org/1999/xhtml";> @K"U)N{P
<head>
f1k1\r&g <meta http-equiv="Content-Type" c />
(M~"B stM G <title>css2.0 VS ie</title>
^8x"J@|bg <style type="text/css">
o(C7k`!m0Tq}u <!-- {@9w Z9]
body {
7}4`YVv#t font-size: 12px; 7Pn5JX0E-N
text-align: center;
:x$G;~ TmiN*w margin: 0px; h(j4g})?
padding: 0px; GMH0G }LF
}
m EV9A/G1r[F #pic{
c_CM#{r3l;uVF X6B"]   margin:0 auto;
3J}%P*A3W,Gz*_   width:800px; B7l(|]5vJ
  padding:0;
~-m,eTT$J   border:1px solid #333;
g%Twb%JQ k j   } )e3I){m3R b2K ]
#pic img{ W7G|:|,Uj#M`
    max-width:780px; !b3}a+v/o&q
width:expression(document.body.clientWidth > 780? "780px": "auto" ); !t%Wj-PD&A-p
border:1px dashed #000;
"T_i,A@_t } &x)v:wZ5~m*U:nU
-->
Z}-M%Z2Yp </style>
X;V#s-Nc&C0n z TH </head>
i+x0J)Y w/[%m3g <body> {@ m,hbI:z*]"x-J5_2t
<div id="pic">
,X&?l6[4T)Dk <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> D Lk3tOQn
</div> @.}|2ES] {
</body> ![;?a'x4_](@s
</html>
ne@UsY+N }7W;R h9JqFJ&O*k
百分比适应:
.?*{ dD:e2tK$ltAT o 以下是引用片段:I#m'xw.a%Ve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1{Pm-\,\ K:[[
<html xmlns="http://www.w3.org/1999/xhtml";>
1Jk|C%|K!mJ <head>
tQ F_1bC6W4e <meta http-equiv="Content-Type" c /> Dy1y6A.n#K[$x B
<title>css2.0 VS ie</title> ~)j0?Mv(i:O
<style type="text/css">
Azj\z3a <!-- @Dt,H?uk
body {
.Qj]2B.} font-size: 12px;
2w3g!qpccg text-align: center;
;[e0c;G0^r f margin: 0px; Y+s]0TeP%M_+x_
padding: 0px;
0lo@.R K8Kfv8p }
Yg#Mp\+E+~+w3jJ #pic{ JXN7]b!c2Dh7_Q
  margin:0 auto;
)a/j1h#]m@p-T9k2{+J~   width:800px;
]EBn^5\   padding:0; "st7A:f;w/D
  border:1px solid #333;
@ KaP A [p   } r!g&j6d\Hv5\(m:w7j
#pic img{
O h#[H1F0J1s/~9H     max-width:780px; D l j|'z0p
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); [:vb$[:w:q
border:1px dashed #000;
R6iU%B&T } ,V7OF_[~RP-g?
--> 6Hq Z.T!d e
</style>
^ r-f'K:a+z </head>
"u9FdF!D0~:g QCG)z <body> m|XL0EE
<div id="pic">
;M.W4]U"s yT(mj <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> [\_+GB-gFE
</div> l-EKC A3w;mH
</body>
)U\ g}J#T </html>

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


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