小编Pet*_*iro的帖子

我知道还有其他问题,但它们已经过时了,并没有更新浏览器的当前支持.而且他们没有用这个来解决Chrome的特殊问题.

我想要一个视频(我想用图像做这个,但在这里我正在使用视频)占据窗口宽度的100%,但是容器具有有限的指定高度.维护视频的宽高比(这非常重要).

基本上,object-fit: cover这里的工作做得很好.并且在Safari中工作得很好,他的容器内的视频高档/缩小保持宽高比.

在Chrome中也会发生这种情况,但不尊重容器的高度.元素超过了他的容器的高度,并根据窗口的宽度保持增长到底部.

object-fit: fill 在两种浏览器中都很好,但问题很明显,不考虑宽高比,使视频/图像等变形.

这就是我所拥有的:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
</video>

CSS

#bgvid {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

我的问题是,如何在所有浏览器中响应地保持元素的宽高比,如何使这项工作完全尊重容器高度(或至少最小高度或最大高度)？