元素未填充容器？答案

【问题标题】：Element not filling in container?元素未填充容器？
【发布时间】：2019-07-11 12:55:50
【问题描述】：

我有一个 div 作为视频元素的容器，我希望视频元素填充 整个容器，为此我将 div 的背景颜色设置为黑色，并将高度和视频宽度为 100%。 我仍然看到黑色，如何让视频填满整个容器？ 填充整个宽度，但不填充高度。

#videoContainer{

width: 600px;
height: 600px;
background-color: black;

}

#video{


  width: 100%;
  height: 100%;

}

<div id ="videoContainer">
 <video  id="video">

    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">

 </video>
</div>

【问题讨论】：

你应该将高度设置为 600px
视频通常是一个比例，在这种情况下，视频是 4:3 的比例，而您试图将其调整为 1:1 的比例，但这是行不通的。您可以尝试使用 object-fit w3schools.com/css/css3_object-fit.asp 这会裁剪一些视频并部分支持 caniuse.com/#feat=object-fit
或者你应该只设置高度和宽度之一。因此，未提及的可以缩放到子元素的（在您的情况下为：图像）大小。
我尝试将大小设置为 600px，我仍然看到黑色
@GingerCSSWizard 那么 YouTube 是如何做到的呢？当我检查 YouTube 视频的页面时，视频会填满整个 div YouTube 将视频元素放入？

标签： html css

【解决方案1】：

根据下面的 cmets 将使视频填充包含的 div。

如果您想让视频适合用户屏幕，请查看此相关帖子 Is there a way to make HTML5 video fullscreen?

html,
body {
  margin: 0;
}

#videoContainer {
  width: 600px;
  margin: 0 auto;
  background-color: black;
}

#video {
  width: 100%;
  height: 100%;
  display: block;
}

<div id="videoContainer">
  <video id="video">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

【讨论】：

【解决方案2】：

将默认的 object-fit css 属性从 contain 覆盖到 cover

#videoContainer{
    width: 600px;
    height: 600px;
    background-color: black;
}
#video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div id ="videoContainer">
  <video id="video">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  </video>
</div>

【讨论】：

这会让视频元素溢出div