如何使视频的宽度为100％或高度为100％ [英] How to make video's width 100% or height 100%

问题描述

我遇到与

解决方案

您几乎了解了这一点，却错过了视频代码的大小.对象位置也可能很方便:

  .remoteVideo {高度:100％;/*或max-height:100％;*/宽度:100％;/*或max-width:100％;*/适合对象:包含；object-position:center;转换:scale(-1，1);} 

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

  body {边距:0;}.remoteVideo-container {位置:固定；左:0；最高:0;z索引:0；宽度:100vw;高度:100vh；文本对齐:居中；background-color:rgb(45，48，53);}.remoteVideo {高度:100％;宽度:100％;适合对象:包含；对象位置:中心；转换:scale(-1，1);}  

 < div class ="remoteVideo-container">< video class ="remoteVideo"自动播放静音的海报="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>  

I'm having the same issue as this, but i'm trying to do it on <video/> element. I want to make video element sometimes width: 100%, and sometimes height: 100% by aspect ratio of it.

Here's my 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);
}

here's my jsx

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

Result:

解决方案

You almost got it, you missed the sizing of the video tag. object-position could be also handy :

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

Possible example to run in full page to test behavior on resize, or version based on max-height/max-width 100% https://codepen.io/gc-nomade/pen/bGNzzNj to shrink video if it becomes bigger than the screen .Up to you to choose value for height and width.

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>

这篇关于如何使视频的宽度为100％或高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！