当然，我所理解的“不失真”是指图片的长宽比例保持不变，如果你有其他的解释请说明。
放大一定会失真，缩小却不会，只要用js控制图片的宽或者就可以，只需要控制一个就可以，给你个js函数function DrawImage(ImgD,ImgW){
//图片大小控制ImgD图片路径，ImgW是宽或高，看效果，看代码
var image=new Image()
image.src=ImgD.src
if(image.width>0 &&image.height>0){
if(image.width/image.height>= 1){
if(image.width>ImgW){
ImgD.width=ImgW
ImgD.height=(image.height*ImgW)/image.width
}else{
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
else{
if(image.height>ImgW){
ImgD.height=ImgW
ImgD.width=(image.width*ImgW)/image.height
}else{
//ImgD.width=(image.width*ImgW)/image.height
ImgD.width=image.width
ImgD.height=image.height
}
ImgD.alt=image.width+"×"+image.height
}
}
}
不定义div的宽度，以及父div的宽度即可。来做一个导航：
<style typr="text/css">
*{margin:0padding:0border:0}
.navbg{background:redheight:50px}
.nav{width:980pxheight:50pxmargin:0 auto}
li{float:leftmargin:10pxline-height:30px}
</style>
<div class="navbg">
<div class="nav">
<ul>
<li>首页</li>
<li>联系我们</li>
<li>留言</li>
</ul>
</div>
</div>
放在<body>里试一下便知
如果<style>里再加一句 body{width:980pxmargin:0 auto}则不能铺满屏幕，只有980px。
