捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。!hk4[2S3OnS w:i
关键在于:max-width:780px;以及下面那行。
+h7T*UE a [b]固定像素适应:[/b]
!j:a/Bal1[*Fh1s B
G`M9il6Gx 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>  以下是引用片段:
7A2le&G%AV^-r%D <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> l FP5ZmN#N#khtj
<html xmlns="http://www.w3.org/1999/xhtml";> ,A2h2X4s3yI4V,b
<head> Y!{ PckK7_d%w
<meta http-equiv="Content-Type" c />
{0@[ `G7pq8]Y@f9m <title>css2.0 VS ie</title> lYy5W P&]
<style type="text/css">
A;tsw(Dz!H/V <!--
B4o%H1qzCf l body {
B6tm6R)~$rB font-size: 12px; z%d5N^ gM
text-align: center; /EP,Gc,q%t[E
margin: 0px;
]!M7z2NG({;P padding: 0px; .Q,J j,U xG m:w"H
}
x6},c`:wr #pic{
i/yk&M,lAI T   margin:0 auto; &Gv7j b1T+p
  width:800px; 9H*cnrA:U'Z
  padding:0; #]V2d f!X9Y
  border:1px solid #333; mn7d4pm
  }
(E;f\-Rn[%Q #pic img{ T1GK"Z~w
    max-width:780px; $p_%fM|{b%l*@&E
width:expression(document.body.clientWidth > 780? "780px": "auto" );
X-~ R}5ys'k border:1px dashed #000; 0x7vT;Vr^
} ww-D;t7v-[
-->
9YO m1W!O'\Y </style> g2i(\Y s(x6X0X
</head> w!i\,n6y2s6m8f {u
<body> /j5L J k@ \)E.h
<div id="pic"> +Hp5U:Z9UV6PaB
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
2`IREpc </div>
2a p o;u ]4]r(v </body>
/Wau`/i!^vm </html>
3ha,VO%bv @_
I3Ql%fNG_)c1L4ae 百分比适应:7CS|9_,n
以下是引用片段:
F4{3He,B0r <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
&G+w? g8c$g V <html xmlns="http://www.w3.org/1999/xhtml";>
.v$W6^Ha o(v <head> L6Q:L|5z;J2q
<meta http-equiv="Content-Type" c /> `"dF-o_,?e'z^
<title>css2.0 VS ie</title>
*SO(V b k G!o <style type="text/css"> Q)xN4r8}@2_4KU4} p
<!-- ]3B;t7\Rs;l$b
body { O+MR-b3SbSq
font-size: 12px; FnVJeY
text-align: center; /k.C]5Oe
margin: 0px;
5Tx7Z&M VL]g padding: 0px;
Q)N}.A5F }
R)aH~z4El #pic{ -Zy6`Xl
  margin:0 auto; y5GX[e:xqD
  width:800px; T!C4fV(C{vX
  padding:0; EJ+R2tLP
  border:1px solid #333;
bL N!t X#zv+W,c [2V   } M+M;p}\xD
#pic img{
$d w'X2EH6{c     max-width:780px; (x!MvOvJ:_
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); e3G K6on&YA8}.O2ns
border:1px dashed #000;
:CG]6ZC|^;Vu6y1W } :FTT5c+b+o9L}C'{'zT
--> X ^,y0F3t"F4_5{
</style> .d"VT*Jq:X
</head>
,cB\7a+Ea~ <body>
s\:tS$Nhv <div id="pic"> "s:mi)^:_Rd
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> h.S"dfOE
</div>
"K;fO%i*VlU;p$K g~!d U </body> 5EY F:|&? CN:e
</html>

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


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