Question

您好，要使视频具有响应性并适合我的设计布局，我正在尝试使视频适合div并在其内部裁剪div的大小。当前，视频溢出并且高度和宽度无法调整，除非将其均匀缩放。我认为最好是将包含视频的div更好地调整高度和宽度，并让视频覆盖此div的大小（隐藏溢出）。因此，在此示例中，视频在容器内，但没有填充到顶部和底部。请告诉我您将如何做？

    <div class="video-container col-md-12">
        <video autoplay muted loop id="myVideo">
          <source src="./img/gordon.mp4" type="video/mp4">
        </video>
    </div>


.video-container {
    width: 40vw!important;
    height: 81vh!important;
    position: absolute;
    top: 9.5vh;
    left: 10vw;
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
}

.video-container video {
    height: 100%;
}

Answer 1

您可以使用object-fit: cover;。浏览器支持非常好：https://caniuse.com/#feat=object-fit

.video-container {
  height:100vh;
}

video {
  width:100%;
  height:100%;
  object-fit: cover;
  background:black;
}

<div class="video-container">
  <video src="https://giant.gfycat.com/FeminineHairyBufeo.mp4" autoplay loop></video>
</div>

使视频的宽度和高度与内部的div相同

1 个答案: