在前端開發中，我們經常需要讓網頁中的圖片或者視頻等元素按照一定的比例自適應，以適應不同尺寸的設備屏幕。這時候，我們就可以使用 CSS 來實現等比例自適應。

實現等比例自適應的方法通常有兩種：

/* 第一種方法：使用 max-width 和 max-height */
img {
max-width: 100%;
max-height: 100%;
}
/* 第二種方法：使用 padding 和 百分比 */
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 假設元素寬高比為 16:9，則 padding-top 為 9 / 16 * 100% */
}
.container-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第一種方法相對來說比較簡單，只需要設置元素的 max-width 和 max-height 即可。這樣，當元素的實際寬高超過了所指定的最大值時，元素就會等比例縮小。但是，這種方法有一個明顯的缺點，就是當元素的實際寬高小于所指定的最大值時，元素就會出現留白的情況。

為了解決留白的問題，我們可以使用第二種方法。這種方法需要將元素的寬高比轉換為 padding-top 的百分比，然后使用一個空的絕對定位子元素來撐開父元素的高度。這樣，無論元素實際的寬高是多少，都會按照所指定的比例等比例縮放，同時不會產生留白的情況。