CSS的一個重要作用就是設置網頁中的圖片。但是，有時候我們可能會遇到一個麻煩：需要將圖片按一定比例縮放，同時不讓其變形。下面，我們就來學習一下如何使用CSS來實現這樣的效果。

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

以上這段代碼就可以讓圖片按比例縮放。其中，max-width屬性表示圖片寬度最大可以設置為容器大小的100%，也就是圖片不會超出其父級元素；而height:auto屬性則保持了圖片的原始高度比例。

在現實應用中，我們更多地需要設置圖片的固定大小。下面是一個實例：

.container {
width: 200px;
height: 200px;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}

這段代碼中，我們先設置了一個寬高為200px的圖片容器.container。然后，使用.container img選擇器設置圖片寬高均為100%。最后，我們使用object-fit:cover屬性，讓圖片以填充方式顯示。這樣，無論圖片的大小和比例如何，都可以被縮放至指定大小，并且不會變形。

總結一下，使用CSS設置圖片不變形最常用的方法是設置圖片的最大寬度為100%而高度自適應、或者使用object-fit:cover屬性實現填充方式顯示。在實踐中，我們可根據具體情況靈活選擇這兩種方法。