在Web開發中，我們常常需要將圖片等比例縮放以適應不同屏幕尺寸或容器大小。那么如何使用CSS來實現呢？

首先，我們可以使用max-width屬性來限制圖片的最大寬度，然后使用height: auto來自適應高度，這樣就能保持圖片的原始比例不失真了。

img {
max-width: 100%;
height: auto;
}

但是，如果我們要將其他元素按比例縮放呢？這時候，我們需要使用padding-top屬性來設置高度。具體來說，我們可以通過計算寬高比例，然后將比例值乘以百分比單位的padding-top來實現。

.container {
width: 50%; /* 假設容器寬度為50% */
padding-top: 75%; /* 假設寬高比例為4:3，75% = 3/4 * 100% */
position: relative; /* 為了方便子元素定位 */
}
.item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/image.jpg");
background-size: cover;
background-position: center;
}

在上面的代碼中，我們首先設置了容器寬度為50%，然后通過padding-top: 75%來保持寬高比例為4:3。同時，我們為子元素設置了絕對位置和背景圖片，然后使用background-size: cover來保持圖片完全覆蓋子元素，并讓其自動縮放到滿足寬高比例的最大值。

綜上，通過max-width和height: auto來縮放圖片，以及通過padding-top設置比例來縮放其他元素，我們可以輕松實現元素的等比例縮放。這樣既能保持頁面的美觀，又能適應不同尺寸的設備或容器。