Question

我有一个视频，我在页面的首页上用作背景，横跨100％的宽度。我希望视频位于几乎页面的中心点。我认为最好的选择是将高度设置为使用vh的线条。然而，我注意到当我进入更大的屏幕时，由于视频本身重新调整到更大的宽度，它也会使视频高度变大，从而导致整个底部被切断。

这就是我所拥有的：

    .container {
      position: relative;
      margin-top: 20vh;
    }

    .video {
      opacity: .2;
      width: 100vw;
      vertical-align: middle;
      height: auto;
    }

有没有办法弄清楚视频的高度是怎样的，然后我可以用它来计算出我可以在顶部添加多少填充作为空白？或者是否有一种更容易让我过度观察的方法？

谢谢！

编辑以添加HTML 这是用于比较的HTML：

<div class="container">

    <video autoplay muted loop class="video">
      <source src="./media/MockUpVid.mp4" type="video/mp4"/>
    </video>

</div>

Answer 1

.container {
  position: relative;
  margin-top: calc((100vh - 56vw)/2);
}

.video {
  opacity: .2;
  width: auto;
  vertical-align: middle;
  min-height: 60vh;
}

使用纵横比，我们可以实现所需的布局。

基于内容高度的margin-top更改

1 个答案: