在Web設(shè)計(jì)中，如何讓視頻等比例縮放是一個(gè)相對(duì)常見的問題。CSS提供了一種簡(jiǎn)單的方法來實(shí)現(xiàn)這個(gè)效果。

首先，我們要設(shè)置視頻的容器。假設(shè)我們要將一個(gè)視頻縮放至50%的尺寸，可以這么寫：

.video-container {
width: 50%;
}

接下來，我們要讓視頻按照容器的比例進(jìn)行縮放。首先，我們需要知道視頻的原始寬高比，這可以通過讀取視頻元素的屬性來獲得：

var video = document.getElementById('my-video');
var ratio = video.videoWidth / video.videoHeight;

接著，我們使用CSS的偽元素::before或::after來創(chuàng)建一個(gè)垂直占位符，其高度為0，寬度為特定比例的百分比。我們還需要將該元素的display屬性設(shè)置為block或inline-block，以填充容器的垂直方向空間。

.video-container::before {
content: "";
display: block;
padding-top: calc(100% / ${ratio});
}

最后，我們需要將視頻元素的寬度和高度屬性都設(shè)置為100%：

#my-video {
width: 100%;
height: 100%;
}

這樣就可以實(shí)現(xiàn)視頻等比例縮放了。