Question

我试图限制视频元素的观看区域，使其不会流过屏幕底部（它应该与我在顶部的调光层相同）。

因此，如果视口为1440x600，则视频也应为1440x600。我添加了overflow:hidden; afaik应该做的伎俩。

CSS / HTML：

＆＃13;

body {
  margin: 0;
  height: 100%;
}

.top {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.top video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}

.dimmer {
  background-color: black;
  opacity: 0.50;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

＆＃13;

<div class="top">
    <div class="dimmer"></div>
    <video autoplay loop muted>
        <source src="http://media.3daysawake.com/water-480p.mp4" type="video/mp4">
    </video>
</div>

＆＃13;

http://jsfiddle.net/sp76wL8x/4/

Answer 1

您可以使用vh和vw属性，这些属性基于视口宽度和视口高度。

在这种情况下，我认为你只需要vh。

如果我理解正确，视频的高度应该是屏幕高度，宽度应相应调整。为此，您可以将高度设置为100vh（视口高度的100％）。

你可以玩这个，并设置宽度或最大宽度。有趣的是，您可以相对于高度表达视频的宽度，例如min-width: 130vh，使视频的宽度至少为视口高度的130％。

height: 100vh;
min-width: 130vh;

使视频标签垂直适合窗口

1 个答案: