CSS视频容器布局：aspect-ratio与max-width应用

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS视频容器布局：aspect-ratio与max-width结合使用》，聊聊，希望可以帮助到正在努力赚钱的你。

使用 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 的处理建议

当容器内嵌入