在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2SQ_ni7Pt关键在于：max-width:780px;以及下面那行。 o(],Y$PO5p%o J
[b]固定像素适应:[/b]C!wh i'l#d qo;Q$J/P
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> 以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head> u w |*_%^%a
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title> #v7Pk {6Bm
<style type="text/css"> (| n$P$H8].r7j?o `
<!-- J m1zx/yp(T8T
body { 3@ a-|OO/YLvS&J
font-size: 12px;
text-align: center;
margin: 0px; U*?1\!LV9f
padding: 0px;
} v,o |'d qHT
#pic{
margin:0 auto; 8E g}Ged
width:800px;
padding:0;
border:1px solid #333; l q E,a d@)x
}
#pic img{
max-width:780px; cB8pSP
width:expression(document.body.clientWidth > 780? "780px": "auto" ); /F)oD2b5x)QH:l
border:1px dashed #000;
} uI5CP-^%}-od
-->
</style> A,p f;O!q
</head>
<body>
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div>
</body>
</html> q2@+J&B w ~2~eft
@X#cB y l'L
百分比适应: C!ZS X'Jt'y
以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> /s3Z%K7u YGO/G
<html xmlns="http://www.w3.org/1999/xhtml";> .uy6V PD I:E&u$F
<head> w$`d*l.\9zf
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title>
<style type="text/css"> |:o"wb} U9hSu1u
<!--
body {
font-size: 12px; x#djQh.L
text-align: center;
margin: 0px; _,n uv:[g&z
padding: 0px; 1E{2S l qXaD1N
} /EM s,\v$v)Sr E
#pic{
margin:0 auto;
width:800px;
padding:0;
border:1px solid #333; U F6Yx:koL
} lwB x/b3k$y)@g
#pic img{
max-width:780px; 0F#O O ~#g?n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); Z3Shu*i? WQ
border:1px dashed #000;
} 8RCKa7IQ ~(se
-->
</style>
</head> {l,r d } u q
<body>
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> Q:i9lu4g pH
</div> 7W `7~!bZ-ltMr
</body> h;u(p#p$R0\o
</html>
页:
[1]