CSS3提供了許多實用的樣式，其中之一就是圖片保持寬高比。在傳統的情況下，當我們將圖片放入一個固定大小的容器中時，圖片將會被拉伸或壓縮，從而破壞了原來的寬高比。但是，通過使用CSS3的新屬性，我們可以輕松地解決這個問題。

具體來說，我們可以使用一個叫做“object-fit”的屬性。這個屬性可以限制圖片的尺寸，使其適應父容器并保持其原始寬高比。默認情況下，這個屬性的值為“fill”，這意味著圖片將填充整個容器，可能會導致寬高比遭到破壞。

為了保持寬高比，我們可以將“object-fit”的值設置為“contain”，這會將圖片縮放到寬度和高度都適合容器的大小，并保持其原始寬高比。如果容器的寬度或高度與圖片的寬度或高度不匹配，那么圖片將垂直或水平居中。

.container {
width: 500px;
height: 200px;
border: 1px solid #ccc;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}

在上面的代碼中，“.container”是一個固定寬度和高度的容器，它包含一個“img”元素。通過將“img”元素的“width”和“height”屬性設置為100%，我們可以告訴瀏覽器將圖片的大小自適應為容器的大小。然后，通過將“object-fit”的值設置為“contain”，我們可以確保圖片適應容器并保持其寬高比不會受到破壞。

通過使用“object-fit”屬性，我們可以輕松地解決圖片尺寸問題，并在顯示圖片時保持其原始寬高比。這是CSS3帶來的一項實用功能，可以讓我們更好地設計和開發網站。