HTML5全屏视频最大高度适配问题求助

我完全懂你现在的痛点——既要让视频控制栏死死占满屏幕宽度，又得保证视频不超过自身原始分辨率，横竖缩放时还得自适应，不能出现滚动条或者视频和控制栏之间的间隙。不用JavaScript，纯CSS就能搞定，给你一套精准匹配需求的方案：

核心思路 #

• 用object-fit: contain保证视频始终恪守原始宽高比，不会被拉伸或裁剪
• 通过容器和视频的双重尺寸约束，让视频在视口内自由适配，同时绝不超过自身原始分辨率高度
• 结合视口单位和max-height，把整体范围牢牢锁在视口内，避免滚动条出现

修改后的完整代码 #

CSS 样式

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ccc;
  overflow: hidden; /* 彻底禁止页面出现滚动条 */
}

.video-content {
  width: 100vw; /* 容器占满整个屏幕宽度 */
  height: 100vh; /* 容器占满整个屏幕高度 */
  display: flex;
  justify-content: center;
  align-items: center; /* 让视频在容器内居中显示 */
}

video {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 320px; /* 这里设为你视频的原始分辨率高度 */
  object-fit: contain; /* 关键属性：保持视频比例，完整显示不裁剪 */
}

HTML 结构

<html>
<body>
  <div class="video-content">
    <video controls>
      <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
  </div>
</body>
</html>

方案细节解释 #

1. 全屏宽度与控制栏自适应：容器设为width:100vw，视频设为width:100%，确保控制栏始终铺满屏幕宽度，横向缩放时自动跟随调整。
2. 最大像素高度限制：给video设置max-height:320px（对应你视频的原始高度），从根源上避免视频被拉伸超过自身分辨率。
3. 横竖自适应无滚动条：
   • html, body设置overflow:hidden，直接杜绝页面级滚动条
   • 容器用flex布局让视频在视口内居中，结合object-fit:contain，纵向缩小时视频会按比例同步缩小，始终完整显示在视口内，不会超出导致滚动条
   • object-fit:contain会让视频保持原始比例，同时完全填充容器空间，不会出现视频和控制栏之间的尴尬间隙

兼容老浏览器的替代方案 #

如果需要兼容不支持object-fit的老浏览器，可以用padding-top百分比模拟宽高比：

.video-content {
  width: 100vw;
  height: 0;
  padding-top: 56.25%; /* 按你视频的宽高比计算：180/320*100% = 56.25% */
  position: relative;
  max-height: 100vh;
}

.video-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 320px; /* 依然保留最大高度限制 */
}

这种方法通过padding-top的百分比固定容器宽高比，视频绝对定位填充容器，同样能实现比例保持和自适应效果。

内容的提问来源于stack exchange，提问作者bobmarksie