在網頁開發中，圖片常常是不可或缺的元素。但是，當我們在網頁中使用圖片時，有時會遇到圖片失真的問題，這給用戶帶來不好的體驗。那么，如何使用CSS控制圖片不失真呢？下面就來詳細介紹。

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

首先，我們可以使用上面的代碼來控制圖片的大小。其中，max-width設置為100%，意味著縮放比例不會超過父元素的寬度。height設置為auto，則高度會隨著寬度的變化自動進行調整。這樣可以避免圖片變形的問題。

img{
object-fit: cover;
}

另外，我們還可以使用object-fit屬性來控制圖片不失真。該屬性可以設置為以下值：

• fill：縮放圖片以填充整個容器。
• contain：縮放圖片以適應容器的大小，并保持原始比例。
• cover：縮放圖片以填充整個容器，并保持原始比例。
• none：不進行縮放，保持原始大小。
• scale-down：縮放比例不超過填充容器的比例，同時保持原始比例。

其中，我們選擇cover屬性，可以讓圖片縮放以填充整個容器，同時保持原始比例，避免圖片的失真問題。

綜上所述，我們可以通過CSS中max-width和height屬性以及object-fit屬性的設置，有效地控制圖片的大小和比例，避免圖片失真的問題，提升用戶體驗。