CSS在網頁中扮演著非常重要的角色，主要用于美化網頁元素，其中圖片也是很重要的一個元素。但是有時候我們在網頁中添加一張圖片時，會發現圖片失真的情況。那么CSS該如何解決這個問題呢？

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

我們可以通過設置圖片的寬度為100%以及高度為自動來解決圖片失真的問題。這樣可以使得圖片的比例保持不變，避免了圖片的拉伸變形。同時，我們還可以在CSS中設置圖片的最大寬度，這樣可以避免圖片過大導致網頁排版錯亂。

img {
max-width: 650px;
height: auto;
}

需要注意的是，這種方式可以解決圖片失真的問題，但是可能會出現圖片在網頁中顯示過小的情況。此時，我們可以通過設置圖片的最小寬度來解決這個問題。

img {
max-width: 650px;
height: auto;
min-width: 300px;
}

通過上述的CSS代碼，我們可以讓圖片在網頁中不失真，同時也能夠根據網頁排版的具體情況顯示合適的大小。