CSS讓圖片不失真自適應是網頁設計中一個重要的方面。當我們網頁上添加了圖片后，我們需要確保圖片大小在不失真的情況下適應不同的屏幕尺寸，這樣才能讓網站在各種設備上都能夠正常顯示。

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

上述CSS代碼的作用是將圖片的最大寬度設置為100%，同時高度設置為自動，這樣圖片就會根據其父元素的寬度自動縮放。

在某些情況下，我們可能需要將圖片完全填充父元素，以免出現空白邊緣。使用CSS的object-fit屬性可以幫助我們解決這個問題。

img {
object-fit: cover;
width: 100%;
height: 100%;
}

上述代碼中，object-fit: cover的作用是將圖片拉伸以填充其整個父元素。width和height都設置為100%，以確保圖片完全填充父元素。

如果我們希望創建一個縮略圖，我們可以使用CSS的background-size屬性：

.thumbnail {
background-image: url("img.jpg");
background-size: cover;
width: 200px;
height: 200px;
}

上述代碼中，我們為含有.thumbnail類的div元素設置背景圖像為img.jpg，然后設置其大小為200px × 200px。background-size: cover的作用同樣是將圖片完全填充div元素。

總之，使用CSS讓圖片不失真自適應是一個很重要的技巧，在網頁設計中非常實用。我們可以根據需要采用不同的方法，確保圖片在各種屏幕上都呈現出最佳效果。