不够，必须同时使用max-width: 100%和height: auto；前者防止溢出，后者保持原始宽高比缩放，单独max-width无法实现真正响应式。

直接用 max-width: 100% 就够了吗？

不够。单独写 max-width: 100% 只是设了个“不许比父容器宽”的上限，但视频默认不会自动缩放——它仍会按原始尺寸渲染，可能溢出或留白。真正起作用的是组合：max-width: 100% + height: auto。前者防溢出，后者强制按比例缩放高度。

video 元素加 height: auto 的必要性

如果不设 height: auto，浏览器对 video 的默认高度行为不稳定：有的按 intrinsic size（原始分辨率）渲染，有的按行内元素 baseline 对齐，导致上下留空或错位。加上 height: auto 后，高度会严格跟随宽度变化，维持原始宽高比。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 错误写法：video { max-width: 100%; } → 高度固定，拉伸/裁剪风险高
• 正确写法：video { max-width: 100%; height: auto; }
• 若父容器有 padding 或 border，记得加 box-sizing: border-box 避免计算偏差

为什么不用 width: 100%？

width: 100% 强制填满，但会破坏响应式弹性：当父容器本身被限制（比如 max-width: 800px），width: 100% 仍会撑满那个 800px，而小屏下可能过大会挤占其他内容；max-width: 100% 则允许它在更小的父容器中继续收缩，更安全。

• width: 100%：必须占满，无退路
• max-width: 100%：最多占满，小了就跟着小
• 移动端横屏时，max-width: 100% 能防止视频突然撑满整个 viewport 宽度，造成字幕或控件过小

遇到 flex 容器里失效怎么办？

当 video 放在 display: flex 的父容器中，即使写了 max-width: 100%，它也可能被 flex 项目默认的 flex: 1 或 min-width: auto 拉伸变形。这不是 CSS 错，而是 flex 布局优先级更高。

• 临时解法：给 video 加 flex: 0 1 auto（不放大、可缩小、基准为内容尺寸）
• 更稳做法：在外层套一层 div.video-container，让容器负责 flex 占位，video 只管自身响应式
• 别依赖 width: 100% 在 flex 子项里“强行填满”，它和 max-width 冲突时，width 通常赢，反而破坏自适应

实际最常被忽略的点是：没有验证视频在超小屏（比如 iPhone SE 竖屏）下的控件可操作性。max-width: 100% + height: auto 虽能保比例，但控件图标可能缩到无法点击——这时得配合 min-width 或媒体查询单独调 video 的 min-height。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！