CSS中的圖片不變形問題一直是網頁設計師們比較頭疼的問題之一。這篇文章將介紹如何使用CSS讓圖片100%不變形。

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

以上代碼中，只設置了圖片的寬度為100%，并且高度自適應。這樣做能夠確保圖片的寬度和父容器的寬度相同，同時保持圖片的高度與寬度之比不變，從而達到不變形的目的。

有時候，我們需要將圖片放在一個固定高度的容器中。這種情況下，我們可以設置圖片的高度為100%，并讓寬度自適應。

.container {
height: 400px;
}
img {
height: 100%;
width: auto;
}

通過以上代碼，我們讓圖片的高度占據了容器的高度，寬度自適應，從而達到不變形的效果。

除了以上兩種方法，還有一種方法可以使用CSS背景圖片來實現不變形。

.container {
background-image: url(image.jpg);
background-size: cover;
background-position: center;
}

我們在容器中設置了背景圖片，并將背景圖片的大小設置為cover，背景位置設置為居中。這樣做也可以達到不變形的效果。

綜上所述，我們可以使用以上三種方式來實現圖片100%不變形，選擇適合自己的方法即可。