在Web開發中，我們常常需要對網頁中的圖片進行設置。當圖片的寬度和高度比例不同時，我們會發現在網頁上顯示的圖片會出現拉伸或壓縮的情況，給用戶的體驗帶來極大的影響。針對這個問題，我們可以使用CSS來避免圖片的高度變形，下面將具體介紹如何實現。 首先，在HTML中插入圖片時，我們需要為img標簽設置一個固定的寬度，而高度則不做限制，使用auto或100%均可。因為當高度不做限制時，瀏覽器會按照圖片的原始比例進行顯示。

<img src="image.png" alt="圖片">
<img src="image.png" alt="圖片" width="300px" height="auto">
<img src="image.png" alt="圖片" width="300px" height="100%">

以上三種寫法中，第一種是不設置寬高的寫法，第二種是設置了寬度為300px，高度自動適應的寫法，第三種是設置了寬度為300px，高度為100%的寫法，它們都會在頁面上正常顯示圖片并不變形。 那么如果我們需要對圖片進行響應式布局，即在不同大小的屏幕上保持一定的比例和最大寬度，例如在手機上最大寬度為90%，桌面端最大寬度為800px，這時候就需要用到CSS了。 我們可以為容器元素設置一個最大寬度，例如：

.container {
max-width: 800px;
width: 90%;
margin: 0 auto;
}

然后再為img標簽設置一個最大寬度和最大高度，讓它保持原始比例：

img {
max-width: 100%;
max-height: 100%;
height: auto;
}

這樣就可以實現圖片的自適應和不變形了。當屏幕尺寸較小時，圖片會自動縮小以保持比例，而當屏幕較大時，圖片最大寬度會受到限制，不會超出容器元素的范圍。 綜上所述，通過為img標簽設置固定的寬度和靈活的高度，以及為容器元素和img標簽設置最大寬度和最大高度，我們可以實現圖片的不變形，適應不同屏幕大小的需求。