CSS视频自适应设置技巧

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS视频自适应设置方法》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

应使用 aspect-ratio 或 padding-bottom 技巧实现视频宽度100%时高度自适应：现代浏览器用 video{width:100%;aspect-ratio:16/9;object-fit:cover}，旧浏览器用外层容器padding-bottom:56.25%配合绝对定位video。

视频宽度设为 100% 但高度不自动撑开？

直接写 width: 100%; height: auto; 在多数情况下**不会生效**——因为 是替换元素（replaced element），其默认宽高由 intrinsic size 决定，height: auto 并不按父容器比例缩放，而是按原始分辨率等比缩放后取“内容高度”，结果常是高度塌陷或溢出。

用 aspect-ratio 最简方案（现代浏览器）

给 或其外层容器加 aspect-ratio，配合 width: 100%，浏览器会自动算出对应高度。常见视频宽高比是 16 / 9：

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 防止拉伸变形 */
}

注意：aspect-ratio 是 CSS Level 4 属性，Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 需加 -webkit-aspect-ratio 前缀（但实际兼容性有限，建议降级处理）。

兼容老浏览器的 padding-bottom 技巧

核心是利用 padding-bottom 百分比值基于**父容器宽度**计算的特性，撑出固定宽高比的空间：

• 外层容器设 position: relative;
• 内部 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%;
• 外层容器用 padding-bottom: 56.25%;（即 9 ÷ 16 × 100%，对应 16:9）模拟高度

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这个方法在 IE9+、所有移动端都可靠，但要注意：如果视频源分辨率不是 16:9，object-fit: cover 可能裁剪边缘；想完整显示可用 contain，但会有上下/左右黑边。

响应式断点下要不要改宽高比？

一般不需要。16:9 是通用选择，竖屏手机上视频虽变窄，但用户习惯上下滑动看全片。强行在小屏切 9:16 会破坏横屏体验，且需额外 JS 监听方向变化，得不偿失。

真正要处理的是：当父容器极窄（比如 max-width: 320px），padding-bottom: 56.25% 算出的高度可能过小导致 controls 被截断。这时可加媒体查询微调：

@media (max-width: 320px) {
  .video-wrapper {
    padding-bottom: 75%; /* 改为 4:3，提升控制条可见性 */
  }
}

宽高比调整是细节优化，不是必须项；优先保证 object-fit 和容器尺寸逻辑正确，比纠结百分比数字更重要。

好了，本文到此结束，带大家了解了《CSS视频自适应设置技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！