CSS在網(wǎng)頁(yè)中扮演著非常重要的角色，主要用于美化網(wǎng)頁(yè)元素，其中圖片也是很重要的一個(gè)元素。但是有時(shí)候我們?cè)诰W(wǎng)頁(yè)中添加一張圖片時(shí)，會(huì)發(fā)現(xiàn)圖片失真的情況。那么CSS該如何解決這個(gè)問(wèn)題呢？

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

我們可以通過(guò)設(shè)置圖片的寬度為100%以及高度為自動(dòng)來(lái)解決圖片失真的問(wèn)題。這樣可以使得圖片的比例保持不變，避免了圖片的拉伸變形。同時(shí)，我們還可以在CSS中設(shè)置圖片的最大寬度，這樣可以避免圖片過(guò)大導(dǎo)致網(wǎng)頁(yè)排版錯(cuò)亂。

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

需要注意的是，這種方式可以解決圖片失真的問(wèn)題，但是可能會(huì)出現(xiàn)圖片在網(wǎng)頁(yè)中顯示過(guò)小的情況。此時(shí)，我們可以通過(guò)設(shè)置圖片的最小寬度來(lái)解決這個(gè)問(wèn)題。

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

通過(guò)上述的CSS代碼，我們可以讓圖片在網(wǎng)頁(yè)中不失真，同時(shí)也能夠根據(jù)網(wǎng)頁(yè)排版的具體情況顯示合適的大小。