Question

正如标题所述，如果我将<video>包裹在<div>容器中（以进一步添加叠加层），设置为relative; inline-block; height:100%;而{{1}大小为<video>它在初始页面渲染方面都很不错，但只要您调整页面大小，视频就会缩小/增长，但容器的宽度仍然是相同。

以下是您的代码：http://codepen.io/MaxYari/pen/PqeOQY
试着改变窗户的高度，看看我的意思。

换句话说 - 我想制作一个包裹height:100%; width:auto标签的容器，它根据其性质保留其纵横比。
这个div-video结构必须适合更大的容器列表适合更大的一面，取决于<video>方向。即水平container-list 单独的height: 100%肯定可以用于不同的方向，因此我只想解决一个案例，假设它将解决这两个问题。

编辑：更新了笔并为视频包装器添加了边框，以更好地说明它的无瑕疵。

Answer 1

在Firefox中，您似乎可以将display: inline-block;更改为display: inline-flex;，如下所示：

Example - 在Google Chrome中不起作用;对于带有一些JavaScript的多浏览器解决方案，请查看以下

body,
html {
  height: 100%;
}
#videos {
  position: relative;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
  height: 100%;
  display: inline-flex; /* see change here */
}
.video {
  height: 100%;
  width: auto;
}

<div id="videos">
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
</div>

MDN Documentation

Can I use compatibility table

在调整窗口大小时，看起来让它在Chrome中运行的唯一方法是force a repaint：

<强> Working Example

$(window).resize(function () {
    $('.video_wrapper').hide().show(0);
});

Chrome似乎有流量视频问题，看起来它与object-fit property有关，幸运的是你可以使用上述方法解决它。

Answer 2

您尚未在视频包装中指定任何宽度

.video_wrapper {
  height: 100%;
  display: inline-block;
}

像这样添加百分比宽度：

.video_wrapper {
  width: 100%;
  height: 100%;
  display: inline-block;
}

Answer 3

实际上只是设置.video包装器不会保留在它的容器中。

你将不得不为身体，html选择器设置最小宽度。使用流体宽度是导致它逃离容器的原因。

所以新的css看起来像

body,html {
  height: 100%;
  min-width: 1024px;
}
#videos {
  position: relative;
  height: 30%;
  background-color: rgba(0,0,0,0.8);  
}
.video_wrapper {
  height: 100%;
  display: inline-block;
}
.video {
  height: 100%;
  width: auto;
}

容器的宽度没有环绕宽度：auto <video>

3 个答案: