用CSS或者JS定义图片宽度高度不失真

放大一定会失真，缩小却不会，只要用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;
}
}

}

失真的原因主要是像素和比例啊！本来像素就不高，大了一定会失真！比例不对一定会变形！

图片大小如果成比例的缩放就不会失真

image-rendering: -webkit-optimize-contrast;