如何使插入的视频保持垂直比例、无缩放且完整显示内容？

直接修改<video>标签的width和height属性通常不生效，因为浏览器默认样式或容器布局规则会覆盖这些设置。要实现保持视频原始垂直比例、完整显示所有内容且不缩放变形的效果，用CSS的object-fit属性就能搞定，具体方案如下：

核心CSS代码 #

.ctn-video {
  /* 限制容器最大宽度，避免桌面端视频过宽，可按需调整数值 */
  max-width: 800px;
  /* 可选：让容器水平居中 */
  margin: 0 auto;
}

.video {
  width: 100%;
  height: auto;
  /* 关键属性：保持视频原始比例，完整显示所有内容，无裁剪无拉伸 */
  object-fit: contain;
}

各属性作用说明 #

• width: 100% + height: auto：让视频自适应容器宽度，同时自动按原始比例计算高度，是基础的响应式比例控制。
• object-fit: contain：这是实现需求的核心。它会强制视频保持原始宽高比，完整展示所有内容——如果容器尺寸比视频大，视频会居中显示，容器空白区域留空；如果容器尺寸更小，视频会等比例缩小适配，绝不会出现拉伸变形或内容裁剪的情况。
• 容器的max-width：用于在桌面端限制视频的最大展示宽度，防止视频过宽破坏页面布局，你可以根据实际页面需求调整这个数值（比如改成100%让视频占满父容器宽度）。

如果你的视频是竖屏格式，这套设置会让它在桌面端完美保持竖屏比例，完整显示上下所有内容，不会被强制横向拉伸。

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