html - 容器的宽度不环绕宽度 :auto

Question

如标题所述，如果我包装 <video>在 <div> 中容器(以进一步添加覆盖)，设置为 relative; inline-block; height:100%;同时 <video>的大小是 height:100%; width:auto在初始页面呈现时一切都很好，但是一旦您调整页面大小时，视频就会缩小/增大，但容器的宽度保持不变。

这是给你的代码笔:http://codepen.io/MaxYari/pen/PqeOQY
只需尝试更改窗口的高度，看看我的意思。

换句话说 - 我想制作一个容器来包裹 <video>标签，其本质上保持其纵横比。
此 div-video 结构必须适合更大的容器列表。
适合较大的一侧，取决于 container-list方向。即height: 100%用于水平。
分开CSS当然可以针对不同的方向进行制作，因此我只想解决一个案例，假设它会解决两个问题。

编辑:更新了 Pen 并为视频包装器添加了边框，以更好地说明它的非包装性。

Answer 1

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

Example - 不适用于谷歌浏览器；对于带有一些 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 有关，幸运的是，您可以使用上述方法解决它。