React 应用程序中使用 objectFit 的视频源：contain 引入了空白，但 cover 放大太多了

Question

我正在开发一个 React 应用程序，其中包含来自用户网络摄像头的实时视频源。视频源使用 HTML 显示并由 MediaPipe 姿势模型处理，以及用于渲染 3D 对象的 Three.js 场景。

问题：

• 使用 objectFit: 'cover' 时，视频填满容器，但放大得太大了。
• 使用 objectFit: 'contain' 时，视频显示正确，但在移动设备上（或横向模式下的两侧）引入了上方和下方的空白。

我希望视频能够自然地显示，而不会缩放太多，也不会引入空白。我尝试过宽度、高度、objectFit 和 CSS 转换的不同组合，但还没有找到在桌面和移动设备上都能正常工作的解决方案。

代码：

这是我的 React 组件的相关部分：

<video
  ref={videoRef}
  style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    width: '100%', 
    height: '100%',  
    transform: 'translate(-50%, -50%) scaleX(-1)', 
    objectFit: 'cover', 
  }}
  autoPlay
  playsInline
  muted
/>

我尝试过的：

• 使用 objectFit: 'cover': 填充容器，但会导致视频放大，从而剪掉部分视频。
• 使用 objectFit: 'contain': 显示整个视频，但会导致移动设备的顶部和底部以及横向的两侧出现空白。
• 调整宽度、高度和变换属性似乎并不能解决所有屏幕尺寸的问题。

我的目标：

我想要视频源：

• 自然显示（无需放大）。
• 不要在任何设备（移动设备和桌面设备）上引入空格。

任何有关如何实现此行为的建议将不胜感激！

Answer 1

尝试使用

object-fit: fill

视频将拉伸或挤压以适应比例或大小，而不会隐藏任何内容或显示空白。

参见 w3schools 上的这个 示例

您还可以设置父级 div 的宽高比以适合给定的比例

这有帮助...