第一種，讓圖片和布局寬度高度成等比例，這樣CSS設置死寬度和高度，圖片也是等比例縮小，圖片也不會變形。
比如淘寶，要求店鋪主上傳產品封面圖片是正方形的，為什么，因為圖片寶貝展示列表都是正方形的排版布局，這樣要求上傳合適正方形寶貝封面圖片，也是讓圖片不變形。
所以有條件的情況下，大家將首頁、圖片列表頁的布局寬度高度保持一致，上傳圖片時候將圖片先進行處理為布局寬度高度時等比例放大尺寸的。
（div設置的寬高和img的寬高相同，但是請保持寬高比例一致，不然你的圖片會變形）
第二種，使用CSS max-width和max-height實現圖片自動等比例縮小
很簡單我們要使用到max-width和max-height,這樣即可設置對象圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖片相對不變形清晰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片按比例縮小</title>
<style>
*{margin:0; padding:0;}
/*第一種方法*/
.div1{
width:270px;
height:150px;
margin: 100px 0;
}
.div1 img{
width:270px;
height:150px;
}
/*第二種方法*/
.div2{
width: 640px;
height:300px;
overflow: hidden;
margin: 100px 0;
}
.div2 img{
max-width:640px;
/*這個值可以更大，但是超過div的話圖片就只能顯示部分*/
width:pxpression(this.width>300?300px:this.width);/*兼容IE6*/
}
</style>
</head>
<body>
<img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt="">
<!--第一種方法-->
<div class="div1">
<img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt="">
</div>
<!--第二種方法-->
<div class="div2"><img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt=""></div>
</body>
</html>