如何使视频宽度或高度达到100%？

Question

我遇到了与这个相同的问题，但是我想在<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>

Result:

- Shotiko Topchishvili

Answer 1

你差不多理解了，只是没有调整视频标签的大小。object-position也可能很方便：

.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>

- G-Cyrillus

Answer 2

我可以通过一个小的CSS技巧来完成。 将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%);
}

- Kiran Kuyate

---

我不想让我的视频覆盖整个屏幕。我想根据它的宽高比，将其设置为与屏幕一样宽或高。 - Shotiko Topchishvili

例如，如果视频的宽度大于其高度，则宽度必须为100％，高度自动。 - Shotiko Topchishvili