在CSS中，設置層的寬高比是一個常見的需求，因為它可以讓我們更好地控制層的顯示效果，尤其是在響應式設計中。本文將介紹如何通過CSS設置層的寬高比。

/* 設置層的寬高比 */
div {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9比例 */
position: relative;
}
div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

在上面的代碼中，我們首先將層的寬度設置為100%，高度設置為0。接著，通過padding-bottom屬性設置層的下內邊距，以實現層的寬高比控制。padding-bottom的值是根據所需寬高比計算出的比例值，此處我們以16:9的比例為例，計算結果為56.25%（9除以16再乘以100）。最后，我們設置嵌入的內容（例如視頻或地圖）為絕對定位，以充分填充整個層。

如果需要使用其他寬高比，只需按照相應的比例值替換代碼中的padding-bottom值即可。例如，4:3比例的值為75%（3除以4再乘以100），1:1比例的值為100%。

通過CSS設置層的寬高比，不僅可以方便地實現響應式設計，還可以提高頁面的視覺吸引力和用戶體驗。同時，我們可以通過JavaScript等技術動態修改層的寬高比，以適應不同頁面和設備的需求。