捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
CDG&q1UR"e#I)P:Ii z 关键在于:max-width:780px;以及下面那行。
DM2e(C eRX [b]固定像素适应:[/b]
IMn'K(h\%mli/{
k0v2ahQ IM 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>  以下是引用片段:
jI5~'B5G A G*Oy*z <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
a~B+L kYg'dE h <html xmlns="http://www.w3.org/1999/xhtml";>
:q \(CA7LQ)C <head> D9o hIQ|*l
<meta http-equiv="Content-Type" c />
Q\Y(G x%?j-t <title>css2.0 VS ie</title>
c%m pm@ <style type="text/css"> 8z2d+OxE u
<!--
l@,_/_f body { z)n)|] sHCH
font-size: 12px; SmSTlT
text-align: center; 6z FKn8T
margin: 0px; $Bz8Jq.W A1s6s
padding: 0px; `-K9A@"@8EK&u_j&Y
} ;w.J[j)Lj2`3U T
#pic{ ;N){ m2szINVFc
  margin:0 auto;
w7AJ7S?0s9`   width:800px; 5Xg8ze}
  padding:0;
f\;F]7\`r ]   border:1px solid #333;
I3`E uyvq   }
JK2]7TK #pic img{ &Pv%E9R/PNL w
    max-width:780px;
*L+VYp ?0o u width:expression(document.body.clientWidth > 780? "780px": "auto" ); !`mP4^0J$JT
border:1px dashed #000;
C?+f#@3C }
2iO#C]}y%x&UP -->
+j\d;zG(i` </style> Z5T{$gW(v
</head> }A5jT^
<body>
g*\,] BO M] <div id="pic"> mX c#UhG
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
3v%MB%^ xr3Aty3s </div> b-I:q&C*fu
</body>
.hr#X+jQM7Y </html> +m*LyrA(\#v{+X

^7ldU}M 百分比适应:
:dkiA2W 以下是引用片段:
_&zb4n zf~A <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ;lk.VfN*L
<html xmlns="http://www.w3.org/1999/xhtml";>
j`B#px(jY <head> H&WiX}
<meta http-equiv="Content-Type" c /> *?"iB,}{+~"@EV{
<title>css2.0 VS ie</title> O\ejLmFF
<style type="text/css">
aoN2HAN;~ ]@HI <!--
T w1`Iw9uVN.] _ body {
b2H U^!V4r$go2@ p!_%A font-size: 12px;
py*u1X} n text-align: center; l\7T2M,OOu+{
margin: 0px;
h6PceeY padding: 0px;
\7zAY2Q;Q X zP*S } 0yf x/^hP8f
#pic{ #SvA:|)bB*P {\tOg
  margin:0 auto;
)|%w3Vs.^`e   width:800px; 0xperMx9Uq7~Q
  padding:0;
d+j9| tRSh Y   border:1px solid #333; !GU3z7Odh&n
  } o Tgzq D"yV&w
#pic img{
6S O3CDoN+tI%{8i     max-width:780px;
W~7ot? width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7g]8q:d8b4k}%R_ border:1px dashed #000; `8y1O,y o"sm[
}
dA @w#`tH? --> Q-wl0a&w%|G}IS
</style> d.j2iK`R n8?Bx2}
</head> D['@'t!L/Y(^5L8BR
<body> x ILZiA Wa3K
<div id="pic"> Q#bY2?^:o%A(N+tNj
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
+HJ~ a T-_\ </div> c*Cq&O+aOLAm,X
</body>
C$rQuY1K8h8P;~ </html>

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


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