使用 aspect-ratio 和 max-width 可实现响应式视频容器，.video-container 设置 aspect-ratio: 16/9 保持比例，max-width 限制宽度，width: 100% 自适应屏幕，子元素设 width/height: 100% 贴合容器，旧浏览器可用 padding-top 百分比降级。
在响应式网页设计中，视频容器的布局适配是一个常见需求。既要保证视频按原始比例显示，又要确保在不同屏幕尺寸下不溢出父容器。通过结合使用 aspect-ratio 和 max-width，可以轻松实现这一目标。
利用 aspect-ratio 保持视频比例
aspect-ratio 是 CSS 中用于定义元素宽高比的属性，特别适合视频、iframe 等需要固定比例的内容。设置后，浏览器会根据宽度自动计算高度，避免布局偏移。
例如，一个 16:9 的视频容器可以这样定义：
.video-container {
aspect-ratio: 16 / 9;
}即使容器宽度变化，高度也会自动调整以维持比例。
立即学习“前端免费学习笔记（深入）”；
使用 max-width 限制最大宽度
为了让视频在大屏幕上不会无限拉伸，在小设备上又能自适应缩放，应为容器设置 max-width: 100%，并配合宽度自适应。
典型写法如下：
.video-container {
width: 100%;
max-width: 800px; /* 可选：限制最大显示宽度 */
aspect-ratio: 16 / 9;
margin: 0 auto;
}这样，容器在小屏设备上占满可用宽度，在大屏上最多显示 800px 宽，始终保持 16:9 比例。
嵌入视频或 iframe 的处理建议
当容器内嵌入
- 将 video 或 iframe 设置为 width: 100% 和 height: 100%
- 添加 object-fit: cover（适用于 video）以填充不留白
- 避免在 HTML 中硬编码 width/height，交由 CSS 控制
示例：
.video-container iframe {
width: 100%;
height: 100%;
border: none;
}兼容性与降级方案
注意：aspect-ratio 在部分旧浏览器（如 IE）中不支持。若需兼容，可采用“padding-top 百分比”作为降级方案：
.video-container-fallback {
position: relative;
width: 100%;
max-width: 800px;
}
.video-container-fallback::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
现代项目推荐优先使用 aspect-ratio，再通过 @supports 添加降级规则。
基本上就这些。合理组合 aspect-ratio 与 max-width，能让你的视频容器在各种设备上都表现良好，既保持比例又不失响应性。
