Question

我知道还有其他问题，但它们已经过时了，并没有通过浏览器当前的支持进行更新。而且他们没有用这个来解决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 */
}

我的问题是，如何在所有浏览器中相应地完成尊重容器高度（或至少最小高度或最大高度），保持元素的宽高比？

Answer 1

我自己就是这么做的。看起来如果将视频元素包装在div中并将overflow设置为隐藏，那么它将解决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的错误：

Answer 2

这是Chrome渲染错误（根据Standard8＆＃39的回复）。另一种方法是设置一个小的 border-radius （＆＃39; 0.5px＆＃39;曾经是最小的值，但我刚刚在Chrome 65和＆lt; 0.1px＆＃39;现在似乎工作了）在视频元素上。这会迫使元素在Chrome中的不同（并且显然更少的错误）渲染路径。

此修复的优点是它不需要收缩包装的裁剪元素＆＃34;围绕视频。缺点是裁剪到略圆的矩形可能的性能稍差于裁剪到矩形。

自适应对象：Chrome上的封底修补

2 个答案: