不管網頁做的美還是丑，有一個問題始終是無法躲避的，就是有的時候會遇到圖片變形的問題，之前遇到過這種問題解決過，不過還是整體的重新研究了一下圖片，其中主要涉及到的知識點就是max-width和max-height的使用，原始圖片為750*626：
其中圖片設置圖片變形的是只有第二張，這一張圖片固定設置了圖片的寬高，第一張圖片圖片是根據圖片的雖然固定了寬高，但是比例和原始圖片一致，所以看不出來變形，剩余的圖片的基本上就是設置其中max-height和固定width，這樣出現的效果沒有變形，如果單純的設置max-width，高度會根據圖片圖片比例變高。
如果想要圖片不變形就是設置max-height或者max-width中的一個，另外固定width或者height中的一個，具體代碼如何，有興趣的可以自行測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客園-FlyElephant</title>
<style type="text/css">
div {
float: left;
}
.test1 img {
width: 187.5px;
height: 156.5px;
}
.test2 img {
width: 300px;
height: 100px;
}
.test3 img {
max-width: 300px;
max-height: 100px;
}
.test4 img {
max-width: 100%;
height: 200px;
}
.test5 {
width: 300px;
height: 200px;
}
.test5 img {
max-width: 100%;
max-height: 100%;
}
.test6 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test6 img {
max-width: 300px;
max-height: 100px;
}
.test7 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test7 img {
max-width: 300px;
}
</style>
</head>
<body>
<div class="test1">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test2">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test3">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test4">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test5">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test6">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test7">
<img src="../../public/images/rv_mobile.jpg" />
</div>
</body>
</html>