当高度为屏幕的 100% 并且调整窗口大小时，如何保持网络摄像头视频居中

Question

使用 React，我有一个网络摄像头视频，当视频的高度是屏幕高度的 100% 时，它必须始终居中。我让视频垂直填充屏幕，但如果我更改窗口的宽度，视频不会保持居中。

return (
  <div style={style.container}>
    <video style={style.video}
           ref={this.videoRef}
           autoPlay={true}></video>
  </div>
)
const style = {
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%', 
    overflow: 'hidden',
  },
  video: {
    transform: 'rotateY(180deg)',
    height: '100%',
    objectFit: 'contain',
    objectPosition: 'center'
  }
}

综上所述，目前，视频只是拥抱窗口的左侧。

Answer 1

如果您的视频宽度为 100%。然后你需要使用左：50%; 和左边距：-50%;希望有帮助吗？

Answer 2

有很多

方法可以解决这个问题，其中之一是添加

position: 'relative',
transform: 'rotateY(180deg) translateX(50%)',
left: '50%'

如下

const style = {
    container: {
        position: 'absolute',
        width: '100%',
        height: '100%', 
        overflow: 'hidden',
    },
    video: {
        position: 'relative',
        left: '50%',
        transform: 'rotateY(180deg) translateX(50%)',
        height: '100%',
        objectFit: 'contain',
        objectPosition: 'center'
    }
}

Answer 3

尝试使用 flexbox

const style = {
  container: {
    display: 'flex';
    alignItems: 'center';
    justifyContent: 'center';
    height: 'auto';
  }
}

Answer 4

谢谢大家，它最终引导我最终找到了有效的方法：

const style = {
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%', 
    overflow: 'hidden',
  },
  video: {
    position: 'absolute',
    transform: 'rotateY(180deg)',
    height: '100%',
    width: '100%',
    left: '50%',
    marginLeft: '-50%',
    objectFit: 'cover',
    objectPosition: 'center'
  }
}