CSS中獲取div寬高比

CSS是Web開發中常用的一種語言，用來控制頁面的樣式。其中使用CSS獲取div寬高比也是一個非常常見的操作。本文將介紹如何使用CSS獲取div寬高比。

在CSS中，我們可以使用以下公式來獲取div的寬高比：

div的寬高比 = div的寬度 / div的高度

其中，div的寬度和高度是通過CSS樣式設置的。以下是一個實例：

html {
font-size: 16px; /* 頁面字體大小 */
box-sizing: border-box; /* 盒模型為border-box */
}
.container {
width: 100%; /* 容器寬度為100% */
max-width: 960px; /* 容器最大寬度為960px */
margin: 0 auto; /* 居中顯示 */
}
.box {
width: 100%; /* 盒子寬度為100% */
height: 0; /* 盒子高度為0 */
padding-bottom: 56.25%; /* 盒子高度的百分比 = 盒子寬度 / 盒子高度 = 16:9 */
background-color: #ccc; /* 背景色 */
}

上面的代碼中，我們通過設置盒子的padding-bottom屬性來獲取其寬高比。其中，padding-bottom的百分比值是根據盒子的寬度來計算的。我們把它設置為56.25%來獲取16:9的寬高比。

總結，CSS中獲取div寬高比是一個非常常見的操作，我們可以利用padding-bottom屬性來實現它。通過調整百分比值，我們可以獲取不同的寬高比例。