容器的宽度不包围宽度:auto <video>

Question

正如标题所述,如果我将<video>s 包装在一个<div>容器中(以进一步添加一个叠加层),设置为relative; inline-block; height:100%;while <video>的大小是height:100%; width:auto在初始页面渲染时它很好,但只要你调整页面大小,视频就会收缩/增长,但容器的宽度保持不变.

这是给你的一个codepen:http://codepen.io/MaxYari/pen/PqeOQY
试着改变窗口的高度,看看我的意思.

换句话说 - 我想制作一个环绕<video>标签的容器,它根据其性质保留其纵横比.
这个div-video结构必须适合更大的容器列表.
适合较大的一面,取决于container-list方向.即height: 100%水平.
独立CSS一定可以为不同的方向进行,所以我只是想解决一个情况下,假定它会解决这两个.

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

Answer 1

在 Firefox 中，看起来你可以像这样display: inline-block;更改display: inline-flex;：

示例 - 不适用于 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 文档

我可以使用兼容性表吗

看起来让它在 Chrome 中工作的唯一方法是在调整窗口大小时强制重新绘制：

工作示例

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

Chrome 似乎在流畅视频方面存在问题，看起来与object-fit 属性有关，幸运的是您可以使用上面的方法解决它。