CSS中寬高保持比例是一個經常使用的技巧。它可以確保元素在不同分辨率的屏幕上顯示時，寬高能夠始終保持相同的比例，從而使頁面更加美觀、統一。

接下來，我們將學習使用CSS實現寬高保持比例的方法。首先需要了解的是，CSS中有一個屬性叫做“padding-top”，我們可以利用它來實現寬高比例的限制。

.box {
width: 200px;
height: 0;
padding-top: 100%; /*設置的百分比可以根據寬高比例進行調整*/
}
.box img {
width: 100%;
height: 100%;
object-fit: cover; /*保持圖片不變形*/
}

上述代碼中，我們使用了一個div元素作為容器，并設置了一個寬度為200像素、高度為0的樣式。然后，通過設置padding-top屬性為100%，能夠使容器的高度與寬度保持相同的比例，如一個正方形的形狀。接著，在容器內添加img元素，并設置其寬度與高度均為100%，使圖片撐滿整個容器。最后，為了保證圖片不變形，我們使用了CSS的object-fit屬性進行設置。

需要注意的是，使用padding-top屬性設置高度時，實際上是把元素的內部空間進行撐開，如果元素內部還有其他元素，則會受到影響。因此建議在外層元素中加一個“空盒子”，用來限制內層元素的影響。

總之，CSS寬高保持比例技巧十分實用，能夠使網頁排版更加整齊美觀，同時還能適應不同屏幕的寬度比例。希望本文能夠對大家有所幫助。