在網頁設計中，圖片是一個重要的元素，它可以增強網頁的視覺效果。然而，在實際應用中，我們經常遇到圖片變形的問題。這時，我們需要使用 CSS 來防止圖片變形。

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

上面的代碼是防止圖片變形的最基本方法。它的原理是讓圖片的最大寬度為容器的寬度，高度自適應，這樣就可以保證圖片不會變形。

另外，我們還可以在圖片容器中添加一些樣式，來進一步防止圖片變形。

.container {
width: 500px;
height: 500px;
overflow: hidden;
}
.container img {
width: 100%;
height: auto;
object-fit: cover;
}

上面的代碼中，我們使用了容器的 overflow 屬性來隱藏超出容器的部分，并且使用了 object-fit 屬性來控制圖片的尺寸。

總的來說，防止圖片變形是網頁設計中一個非常重要的問題。通過合理運用 CSS 樣式，我們可以輕松達到防止圖片變形的效果。