Html 如何制作视频&x27；s宽度100%或高度100%

我遇到了与相同的问题，但我正在尝试在

元素上执行此操作。 我想让视频元素有时宽度为100%，有时高度为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>

结果:

---

我通过一个小小的css黑客就可以做到这一点。 将“最小宽度”和“最小高度”设置为100%，然后将“高度”和“宽度”设置为“自动”，以防止在视频中拉伸或缩放。 再加上一点，使视频居中

.remoteVideo {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

---

你差一点就搞定了，你错过了视频标签的尺寸。对象位置也很方便：

.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);
}

可能的示例是，在整页运行以测试调整大小的行为，或基于

最大高度

/

最大宽度

100%

的版本，以在视频变得比屏幕大时收缩视频。由您选择高度和宽度值

正文{
保证金：0；
}
.remoteVideo容器{
位置：固定；
左：0；
排名：0；
z指数：0；
宽度：100vw；
高度：100vh；
文本对齐：居中；
背景色：rgb（45,48,53）；
}
.远程视频{
身高：100%；
宽度：100%；
对象匹配：包含；
对象位置：中心；
变换：比例（-1,1）；
}

我不希望我的视频覆盖整个屏幕。我想根据视频的纵横比，使其与屏幕一样宽或一样高。例如，如果视频的宽度大于其高度，则宽度必须为100%，高度自动