响应式对象:Chrome上的封面修复

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的错误:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890

Answer 2

这是Chrome渲染错误(根据Standard8的回复).另一种解决方法是在视频元素上设置一个小的border-radius('0.5px'曾经是最小值,但我刚刚在Chrome 65中测试,'0.1px'似乎现在可以工作).这会强制元素在Chrome中的不同(并且显然更少的错误)渲染路径.

此修复程序的优点是它不需要在视频周围使用"收缩包装裁剪元素".缺点是裁剪成略圆的矩形可能比裁剪到矩形的性能稍差.