css 容器等比例 |css移动动画代码

.container {
position: relative;
width: 100%;
max-width: 1000px;
overflow: hidden;
padding-bottom: 56.25%; /* 16:9 比例 */
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

在上述的代码中，首先设置了容器的最大宽度为1000px，同时设置了容器的padding-bottom属性为56.25%，这个百分比是根据16:9的宽高比计算出来的。这里使用padding-bottom属性是因为它是按照容器宽度的百分比计算的，所以随着宽度的变化，高度也会相应地调整。

在容器的内部，大家可以放置一个视频元素，它被设置为绝对定位，覆盖整个容器。同时使用object-fit属性来控制视频的缩放方式，cover表示让视频完全覆盖容器，导致部分视频内容可能被裁剪。如果想要完整显示视频，可以使用contain。

总的来说，使用CSS容器等比例可以让大家更方便地控制网页中的媒体元素，保证它们在不同设备和屏幕尺寸下的正常展示。