在網頁設計中，經常需要用到圖片來美化頁面，但是有時候圖片的大小和比例并不和我們想象中一樣，會導致圖片在頁面中顯示變形。為了解決這個問題，CSS提供了幾種方法可以顯示圖片不變形。
首先，我們可以使用CSS的max-width和max-height屬性來限制圖片的最大大小，確保圖片不會超出我們希望的大小范圍。同時，我們也可以使用CSS的width和height屬性來指定圖片的寬度和高度，以確保圖片保持原始比例并且不變形。例如，下面的代碼可以使圖片最大寬度為100%、最大高度為200px，并保持原始比例：

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

另外，我們還可以使用CSS的object-fit屬性來指定圖片的顯示方式，以確保圖片不變形。object-fit屬性有以下幾種取值：
- fill：將圖片等比縮放并填滿所在容器，可能導致圖片變形；
- contain：將圖片等比縮放以適應所在容器，并在容器中居中顯示，不會變形；
- cover：將圖片等比縮放以覆蓋所在容器，可能會有部分圖片顯示不完全，不會變形；
- none：保持圖片原始尺寸；
- scale-down：將圖片等比縮放以適應所在容器，但縮放后的尺寸不得比原始尺寸更小。
例如，下面的代碼可以使圖片在容器中居中顯示，并保持原始比例：

img {
width: 50%;
height: 200px;
object-fit: contain;
}

通過以上的方法，我們可以在網頁中顯示圖片時避免圖片變形的情況，并且可以根據需要進行適當的裁剪和縮放。在實際應用中，我們可以根據具體頁面的需求和設計來選擇合適的方法，以達到最佳的顯示效果。