Question

我在容器中有一个视频元素，我喜欢它以填充所述父容器（相当于background-size：cover;用于背景图像）。视频的父容器使用vw和vh单位。

我真的很挣扎。我只能通过使用宽度：100％，但高度：自动不填充容器的高度并使用相同的vw和vh测量，因为父元素也不成功，所以它可以得到它。

我将如何接近这一点 - 我好像是绕圈子/拉我的头发。

这是否需要JS解决方案？

任何想法都会很棒。代码和Codepen链接如下。

codepen：https://codepen.io/pauljohnknight/pen/EXwbzz

＆＃13;

var video = document.getElementsByTagName('video');
video[0].play();
video[0].loop = true;
video[0].controls = false;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.videoholder {
  background: #666;
  height: 150vh;
  width: 50vw;
}

video {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="wrapper">
  <div class="videoholder">
    <video src="https://www.marketing-people.com/wp-content/uploads/2017/02/bakerbox-mockup.mp4" class="myvideo"></video>
  </div>
</div>

＆＃13;

Answer 1

您可以绝对定位视频标记以填充父容器，然后在视频标记上使用object-fit: cover;。

https://codepen.io/anon/pen/Xgexdj

更新：这不适用于任何版本的IE。这是一个polyfill，可以在IE 8 - 11中使用它。https://github.com/jonathantneal/fitie

Answer 2

就像图片一样，如果您使用width:100%和height:auto，视频会将其视为原始尺寸并放大/缩小它们以使其适合整个宽度，同时保留原始尺寸宽高比

如果您希望视频在高度上延伸，则设置width:100%将无效，因为它会尝试保持原始高宽比

与使用background-size:cover（切除图片以便填充整个包装但同时保持比率）类似，您可以使用width:auto，height:100%和{{ 1}}在包装器上

＆＃13;

overflow:hidden

＆＃13;

var video = document.getElementsByTagName('video');
video[0].play();
video[0].loop = true;
video[0].controls = false;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.videoholder {
  overflow:hidden;
  height: 150vh;
  width: 50vw;
	background:url("http://lorempixel.com/1140/450/") no-repeat scroll center top /cover  #666;
}

video {
  width: auto;
  height: 100%;
}

＆＃13;

使视频匹配其父容器的大小（使用vh和vw单位）

2 个答案: