CSS中的高寬固定比例是一種非常實用的技術，可以讓你的網頁在不同的設備上呈現出更美觀、更統一的效果。下面，讓我們來看看如何使用這種技術。 我們使用CSS的padding-top屬性來實現高寬固定比例。例如，我們希望一個元素的高度是寬度的50%，那么我們需要設置padding-top為50%。 下面是一個簡單的實例：

div {
background-color: gray;
height: 0;
padding-top: 50%; /* 高寬比例為1:2 */
position: relative;
width: 100%;
}
div:before {
content: "";
display: block;
padding-top: 100%; /* 創建一個占位符 */
}

上面的代碼中，我們將一個div元素的高度固定在了它的寬度的50%。我們還使用了一個:before偽元素來創建一個占位符，確保元素的高度是正確的。由于padding-top是相對于元素寬度的，所以無論div元素的寬度是多少，它的高度都會保持在寬度的50%。 除了上面的示例，我們還可以使用其他的比例來實現不同的效果。例如，我們可以將高度設置為寬度的75%：

div {
background-color: gray;
height: 0;
padding-top: 75%; /* 高寬比例為3:4 */
position: relative;
width: 100%;
}
div:before {
content: "";
display: block;
padding-top: 100%; /* 創建一個占位符 */
}

這里的高寬比例為3:4，即一個元素的高度是寬度的75%。 總之，CSS中的高寬固定比例技術非常實用，可以讓我們輕松地創建各種大小比例的元素。只要掌握了這種技術，就可以將網頁設計得更加美觀、統一。