CSS是為網頁設計提供樣式和布局的語言，可以在頁面中應用各種效果，其中包括圖片的顯示。

在網頁設計中，經常需要根據頁面布局的要求進行圖片的拉伸或縮放，然而這種操作可能會導致圖片變形。下面我們來看一下如何解決這個問題。

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

使用以上代碼可以將圖片寬度設置為100%，高度按比例自適應。這樣做的好處是可以保持圖片的原始寬高比，避免了因為拉伸或縮放導致的變形。

但是，如果需要將圖片在指定的容器中按比例進行拉伸或縮放，那么就需要使用css的屬性：object-fit。

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

以上代碼將容器中的圖片進行自適應，保持原始寬高比，同時將圖片自動縮放并裁剪，使其完全填充容器。object-fit屬性有幾個值可以選擇，包括cover、contain、fill、none和scale-down，通過這些值可以滿足不同的圖片布局需求。

總之，在進行圖片的拉伸或縮放時，一定要保持原始寬高比，同時通過合適的css屬性調整布局，以達到最佳顯示效果。