捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。(JO|Hmi#T$|4z0KS
关键在于:max-width:780px;以及下面那行。YR zb"H^"yo6D)L
[b]固定像素适应:[/b]&L1c FVK-uzM!p:[b

3T^0O0zy#y&I 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>  以下是引用片段:
ZxqP.h6a-Q <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
I B? Of4T <html xmlns="http://www.w3.org/1999/xhtml";> s {'K(hE-@m~C1r
<head>
n ^ ?h'd5? ^w <meta http-equiv="Content-Type" c /> MX q(w8g'l F(]
<title>css2.0 VS ie</title>
%c8X7L,UP%IA-~^!A <style type="text/css"> 1\)q7wg0z
<!--
T3B3Hu RuSRB body {
Hu3J{9tR7b~#_ font-size: 12px;
[+L;w SK1f Q\+Z text-align: center;
t0s3Xv(m&ER1h [z margin: 0px;
8d1Tw#t/x(A B padding: 0px; '_3k1G5d5`6m"?
}
I:c7AGYrf~D)k #pic{ J"D&E-B1{3\)b w!O`
  margin:0 auto; bQ&K(r~
  width:800px; 'yn-IQ1n(m
  padding:0; %]F:~WA$s&{(R9I
  border:1px solid #333; (]e_x }9Hg0g
  }
j1N#||3m@S$O #pic img{
z6KF3g?L!p     max-width:780px; 5@4p5q!i"r&pU/n/R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); FG c3z#w'w G
border:1px dashed #000; ;K+R {AJ%jS @ B
} 1wy5a$y/g&g|M
--> 8r S$Cp0R]
</style> VGDG/y&P+o
</head> ^u.y mXn_#Q#eL
<body> a(w^H6V] P
<div id="pic"> C ^t6It){,L0l3l9t
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> -V!a^;zk?'fs$h8Ul9{-i
</div> /z6D,bD+w*r!_!p$e
</body>
k r)Y-D|sj'O </html>
prU c,T+[
;B\r!a*K L 百分比适应:
0};SIgO 以下是引用片段:
{3RV/V UN)\ Z|M+U <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ;Uq0w1TU2z
<html xmlns="http://www.w3.org/1999/xhtml";>
7l'Y$W%|Tfo? <head>
fulD$\1cQ"V <meta http-equiv="Content-Type" c /> 9n%[Ev?\z ]T
<title>css2.0 VS ie</title> ihxa'o/O#a'T@t
<style type="text/css">
$d8Bk(s-F+Q)n <!--
}.B `3MB0])nX body {
^'s/P3LJ U*}U font-size: 12px;
h*yG)?$yk2h-L'\ text-align: center; _:Sg s1M
margin: 0px; l)DL2d WK1r
padding: 0px; [#HP?j*m.}"b5q5Xeu9?G
}
ZsLu0M,T HeD #pic{ .P"eE/a9e*n
  margin:0 auto; SuA-@ Im
  width:800px;
$_Ml-}2Ly*~(?   padding:0;
]'I YvB{   border:1px solid #333;
D)S4m4S0tg5_P0R   } og7[ZNF e)G
#pic img{
5\C W-s2_-|H ~5x0Q     max-width:780px;
$U5s7e\?L*K i width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 1WhxC+XA T
border:1px dashed #000; t)h.I2? oY
} })s O1x4C3~
-->
#^lZb5U7I5P? </style>
Yb$[7](Ye^ </head>
:j_'t(p hp#K <body>
/Vl}3v#I|"j H(H_$`0jd <div id="pic"> ;cm2a7T5u~4lJ+\
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> U_~*rx8p3Q
</div>
EV0r#Ei3~Q(W </body> tPw%Q t*Z"h8ty
</html>

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


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