React Native Android竖屏视频转横屏适配问题咨询

作为刚踩过这个坑的开发者，我完全懂你那种固定padding在不同设备上失效的挫败感！下面几个CSS方案能帮你彻底解决这个问题，都是自适应的，不用硬写数值：

1. 用 object-fit: contain 保持完整比例 #

这是最直接的方案，object-fit 属性专门用来控制视频、图片这类替换元素在容器内的适配方式。contain 值会让视频保持原始宽高比，完整显示在容器中，不会被裁切，同时自动在横屏时的两侧或竖屏时的上下留出空白，避免超出容器范围。

示例代码：

.video-container {
  width: 100%;
  max-height: 100vh; /* 限制视频最大高度为视口高度，避免页面滚动 */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 核心适配属性 */
}

2. 结合 aspect-ratio 强制保持竖屏比例 #

如果你想让视频容器始终维持竖屏的标准宽高比（比如9:16），可以用CSS的 aspect-ratio 属性，配合 max-width 和 max-height 让视频在不同尺寸的屏幕上自动缩放，不会超出视口边界。

示例代码：

.video-container {
  max-width: 90vw; /* 给左右留一点边距，避免视频贴满屏幕 */
  max-height: 100vh;
  margin: 0 auto; /* 让容器水平居中 */
  aspect-ratio: 9/16; /* 竖屏视频的标准比例 */
}

.video-container video {
  width: 100%;
  height: 100%;
  /* 想填满容器（可能裁切边缘）用cover；要完整显示用contain */
  object-fit: contain;
}

注：如果需要兼容IE这类旧浏览器，可以用padding-top百分比技巧模拟aspect-ratio：padding-top: calc(16/9 * 100%)，再将视频绝对定位在容器内即可。

3. 用Flex布局让视频在视口中居中适配 #

如果希望视频直接占满视口的可用空间，同时保持比例且不需要滚动页面，可以用Flex布局让容器占满整个视口，再让视频居中适配。

示例代码：

body {
  margin: 0; /* 去掉页面默认边距 */
  overflow: hidden; /* 禁止页面滚动 */
}

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #000; /* 背景设为黑色，让两侧空白更自然 */
}

.video-container video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

这些方案都是基于视频原始宽高比自适应的，不管是手机横屏、平板还是桌面显示器，都能保证视频要么完整显示，要么按比例填满容器，不会出现裁切或需要滚动的问题。你可以根据自己的需求选一种试试，推荐先从第一种方案入手，最简单直接！

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