捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。,SQ1C} k'_.W
关键在于:max-width:780px;以及下面那行。
a&?\w4w)v [b]固定像素适应:[/b]
$g+`]3k0V7[k.@ 7U1v ~U1Z[
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>  以下是引用片段:
3?#z%wVIS%r"^0L <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
LF v8E.E }J <html xmlns="http://www.w3.org/1999/xhtml";>
Ar8`_8w-nDG <head>
+s"e5^%V`0v+VR-L6R <meta http-equiv="Content-Type" c /> ;ZFCA TaeC
<title>css2.0 VS ie</title>
{F5[1fVB-yB)x <style type="text/css"> X4SgJ}Dmk4u#j
<!--
frFo Ycjr,GJ body {
OF X)f,j6P font-size: 12px;
Nl,laP$L text-align: center; -}GTq M,fj}Lz#^ W*R
margin: 0px;
'e]/`X,Nu8h padding: 0px;
eT,P[mb#pN$n } K+r(@L B)j/`k%_
#pic{
? ~kd ?*wpE   margin:0 auto;
_ ]+m"b,d   width:800px;
Uj$u+|4\$eMx   padding:0; {I ?5PX5\ ]
  border:1px solid #333;
H ot.]B-C   } y8G_ ~DN
#pic img{
'l6ZkK:Ot&xD,S1}$sB     max-width:780px; 7RW1H:Br`L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
-HA+OR5aUZ5P.{-bU6^ border:1px dashed #000; 9~_jbf6w U
} j,p4\fu,q^5^
--> :{[0L5``3E5T
</style>
cKj~Coj6`9Q%b </head>
Iu4ef"~4W&rz g%Ph <body>
2w&EhR(W <div id="pic">
i A3B~}\ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> !b}!DL$_$D
</div>
`V"\I!B/R1o} </body>
k;km/h7D6z8~w` </html>
N$b R!~P@hw:Ju Z]*@ |o
百分比适应:
_R j9B0];M%j`` 以下是引用片段:,t#i-aV[7hqx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
A^$eq'? <html xmlns="http://www.w3.org/1999/xhtml";> A?)b2}|2n
<head>
rwd s he!H4I <meta http-equiv="Content-Type" c /> ~#^E^QIS
<title>css2.0 VS ie</title> 8\8PR#n/H6EZ
<style type="text/css"> C2B LkQa
<!-- O gj}O
body {
+EOC0~@%[3| font-size: 12px; dV#V/O ~5L_
text-align: center;
#Tn\4Pv6U"B margin: 0px;
,dGLi"WaQ7Bb)T padding: 0px; lh;L[D,r@T5O
} AB.f&dtNW
#pic{ ,A?2\+}!Wuc
  margin:0 auto; +m%N^ BT3u2K
  width:800px;
6Z'c$uGf*}0_   padding:0;
DS `*D1Qf*q   border:1px solid #333;
KD.O6m O(`   }
W\:H!Md:pjp*@;L #pic img{ 3k4N3OZrW'WM&f
    max-width:780px; 6N3s4Z!M ^ b7c2k5J`c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
OG8Gw!EL%S border:1px dashed #000;
gvH(i:p }
!H.y-{S;VZw -->
pkX*?A </style>
Xt8P Eo&^W#OxE7C </head> Nv'?s,rn
<body> dp&C)j6s
<div id="pic">
"uq7@[B@/l4g <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
#V q7{5x&lh9r:R0d!G*k F g </div> HUf9u8v'a
</body> Y6{ U(F*`8bC-IL8oX
</html>

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


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