如何使视频的宽度为 100% 或高度为 100%

IT技术 html css reactjs
2021-05-27 21:45:17

我遇到了与此相同的问题，但我正在尝试在<video/>元素上执行此操作。我有时想制作视频元素width: 100%，有时height: 100%按它的纵横比制作。

这是我的 css

.remoteVideo-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgb(45, 48, 53);
}

.remoteVideo {
  object-fit: contain;
  transform: scale(-1, 1);
}

这是我的 jsx

      <div className="remoteVideo-container">
          <video
            className="remoteVideo"
            autoPlay
            ref={this.remoteVideo}
            muted
          ></video>
      </div>

结果：

在此处输入图片说明

2个回答

你几乎明白了，你错过了视频标签的大小。对象位置也很方便：

.remoteVideo {
  height:100%; /* or is max-height:100%; */
  width:100%;  /* or is max-width:100%;  */
  object-fit: contain;
  object-position:center;
  transform: scale(-1, 1);
}

在整页中运行以测试调整大小行为的可能示例，或基于max-height/ max-width 100% https://codepen.io/gc-nomade/pen/bGNzzNj 的版本以在视频变得大于屏幕时缩小视频。由您选择值对于高度和宽度。

body {
  margin: 0;
}

.remoteVideo-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgb(45, 48, 53);
}

.remoteVideo {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(-1, 1);
}
<div class="remoteVideo-container">
  <video class="remoteVideo" autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">
    <source  src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm" />
    <source  src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" />
  </video>
</div>

我能够通过一个小的 css hack 来做到这一点。将 min-width 和 min-height 设置为 100%，然后将 height 和 width 设置为 auto 以防止拉伸或放大视频。还有一点可以使视频居中。

.remoteVideo {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
其它你可能感兴趣的问题
上一篇react-router中，this.context.router的类型是什么？ 下一篇如何在 ES6+ 的 webpack 中的 node_modules 上使用 babel 加载器？