我知道还有其他问题，但是这些问题已经过时，并且没有通过浏览器的当前支持进行更新。而且它们并没有解决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 */
}
我的问题是，如何在所有浏览器中做出响应，以确保元素的长宽比完全符合容器的高度(或至少为min-height或max-height)？
最佳答案
我自己也打过看起来，如果将视频元素包装在div中，并将溢出设置为隐藏，那么它将解决Chrome的错误，即:
<div class="wrapper">
<video preload autoplay loop poster="poster.jpg" id="bgvid">
<source src="image/video.mp4" type="video/mp4">
</video>
</div>
与CSS
#bgvid {
width: 100%;
height: 100%;
background-color: #f0f0f0;
object-fit: cover; /* cover works perfectly on Safari */
}
.wrapper {
width: 100%;
min-width: 100%;
height: 445px;
max-height: 445px;
overflow: hidden;
}
我还刚刚发现了几个问题文件，似乎涵盖了Chrome的错误:
关于html - 自适应对象适配:Chrome的封面修复，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30700144/