在網頁設計中，圖片是不可或缺的元素之一。然而，當我們將圖片放入頁面中時，往往會出現圖片變形的問題，影響網頁的美觀度。那么，如何使用 CSS 來設置圖片不變形呢？ 要想讓圖片不變形，我們需要了解如何控制圖片的尺寸。CSS 中，我們可以使用 width 和 height 屬性來設置圖片的寬度和高度。但是，在設置這兩個屬性時，我們需要注意保持圖片的寬高比例不變，這樣才能防止圖片變形。 比如，假設我們有一張寬度為 1000 像素、高度為 500 像素的圖片。如果我們想將其縮小到寬度為 500 像素，那么我們可以這樣寫 CSS 代碼：

img {
width: 500px;
height: 250px; /*保持寬高比例為 2:1*/
}

在這個例子中，我們將圖片的寬度設為 500 像素，同時將其高度設置為 250 像素，以保持原始寬高比例。這樣，圖片就不會變形了。 另外，有些時候，我們可能不想將圖片的寬度和高度直接設置為像素值，而是想讓它們根據容器的大小自適應。這時，我們可以使用 max-width 和 max-height 屬性，它們可以防止圖片超出容器大小，并且保持寬高比例不變，以避免變形。比如：

.container {
width: 500px; /*容器寬度*/
height: 300px; /*容器高度*/
}
img {
max-width: 100%; /*寬度最大為容器寬度*/
max-height: 100%; /*高度最大為容器高度*/
}

以上代碼中，我們將圖片的 max-width 和 max-height 屬性都設置為 100%，這樣圖片的寬度和高度就會自適應容器大小，并保持寬高比例不變。 總之，如果想要讓圖片不變形，我們需要掌握一些 CSS 技巧，如保持寬高比例不變、使用 max-width 和 max-height 屬性等。這樣做可以讓網頁更美觀，提高用戶的體驗。