如何调整视频位置实现移动端无裁切缩放适配？

要实现视频在移动端缩放时完整展示所有内容，核心是让视频容器和视频本身自适应屏幕尺寸，同时避免裁剪视频内容，以下是具体实现步骤：

1. 调整视频容器的尺寸约束 #

给视频容器设置相对宽度，确保它能适配移动端屏幕，同时限制最大宽度避免在大屏上过度拉伸：

.video-container {
  width: 100%;
  max-width: 100%; /* 确保容器不超出屏幕宽度 */
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16/9; /* 匹配视频的原始宽高比，可根据你的视频调整 */
}

2. 配置视频元素的自适应规则 #

给视频元素设置object-fit: contain，这个属性会让视频保持原始宽高比，完整显示在容器内，不会裁剪任何内容；同时设置宽度和高度为100%，让视频填满容器：

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：保持视频完整，不裁剪 */
  display: block;
}

3. 处理移动端的视口适配 #

确保你的HTML头部已经添加了视口元标签，让移动端浏览器正确识别屏幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

补充说明 #

• 如果你的视频宽高比不固定，或者需要更灵活的适配，可以去掉aspect-ratio属性，让容器高度由视频内容自动撑开，但这样可能会导致布局高度变化；
• 若之前用了object-fit: cover，这会导致视频填充容器时裁剪超出部分，换成contain就能解决内容丢失的问题；
• 测试时可以在不同尺寸的移动端设备或浏览器开发者工具的移动端模式下验证效果，确保视频内容完整显示。

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