使用 aspect-ratio 属性配合 width: 100% 即可实现固定宽高比且自适应宽度的视频播放盒。将容器宽度设为父级全宽，并指定如 16 / 9 的比值，浏览器会自动计算高度，无需再依赖传统的 padding-bottom hack。
aspect-ratio 在不同屏幕下的表现如何
当容器宽度随视口变化时，高度会严格按比例缩放。例如设置 aspect-ratio: 16 / 9，无论宽度是 300px 还是 800px，高度始终为宽度的 9/16。这种响应式行为在现代浏览器中由布局引擎直接处理，保证了视觉一致性。
div.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
旧版浏览器如何处理相同需求
在不支持 aspect-ratio 的环境中，需使用 padding-bottom 技巧。通过设置一个等于宽高比百分比的 padding-bottom，并利用 position: absolute 让内部元素填满容器，从而模拟出固定比例的效果。这种方法兼容性更好，但代码结构稍显复杂。
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 = 9/16 * 100% */
height: 0;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
当视频内容超出容器边界时会发生什么
如果未对 标签应用 object-fit 或明确尺寸控制，视频可能因原始分辨率与容器比例不一致而被拉伸或留黑边。设置 object-fit: cover 可确保视频填充整个区域并裁剪溢出部分，保持画面完整且不变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
