html - 基于内容高度的 margin-top 变化

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

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