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

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

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

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

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

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

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

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