代码之家 › 专栏 › 技术社区 › Wazza

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

reactjs css html

Wazza · 技术社区 · 7 年前

使用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'
  }
}

通过以上,目前,视频只是拥抱窗口的左侧。

4 回复 | 直到 7 年前

Developer Tanbir 7 年前

如果你的视频 . 那你需要用 左:50%; 和希望有帮助?

Niraj Kaushal 7 年前

有很多方法可以解决这个问题,其中之一就是添加

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'
    }
}

Fahad Azhar 7 年前

尝试使用flexbox

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

Wazza 7 年前

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'
  }
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前