CSS高度按寬度比例縮放是一種常見的網(wǎng)頁布局處理技巧，它可以使得頁面在不同的屏幕尺寸下能夠自適應(yīng)地變化。下面我們將學(xué)習(xí)如何使用CSS實現(xiàn)這一技巧。

.box {
width: 50%; /* 父元素寬度 */
height: 0; /* 高度為0 */
padding-bottom: 50%; /* 高度為寬度的50% */
position: relative; /* 為子元素定位做準(zhǔn)備 */
}
.box-inner {
position: absolute; /* 絕對定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
}

以上代碼中，我們首先定義了一個名為“box”的寬度為50%的父元素，并將其高度設(shè)置為0。接著，我們再設(shè)置這個父元素的填充高度（padding-bottom）為50%，這個值正好等同于這個父元素寬度的一半，因此我們可以說父元素高度按照寬度的50%比例縮放。

在這個父元素里面，我們還定義了一個名為“box-inner”的絕對定位子元素（absolute position），并將它的top、left、right、bottom四個定位值都設(shè)為0。這樣一來，“box-inner”子元素就可以占據(jù)整個“box”父元素的空間了。

在實際應(yīng)用中，我們一般會把需要按比例縮放的元素放到“box-inner”這個內(nèi)部容器中，以便更好地控制其尺寸和位置。例如：

<div class="box">
<div class="box-inner">
<img src="picture.jpg" alt="圖片">
</div>
</div>

以上代碼中，我們在“box-inner”容器里面放置了一個圖像（img）元素，這個圖像會自動按照比例縮放，使得它的寬度等同于“box-inner”容器的寬度。

綜上所述，CSS高度按照寬度比例縮放是一種非常實用的網(wǎng)頁布局技巧，可以使得網(wǎng)頁能夠適應(yīng)不同的屏幕尺寸，并具有良好的響應(yīng)性。我們只需在CSS中添加簡單的幾行代碼，就可以輕松實現(xiàn)這一效果。