在处理子像素渲染时如何使图像或视频填满整个容器？

Question

一些浏览器在渲染使用百分比在页面上定位和调整大小的图像或视频媒体时，有时会使媒体内容（图像或视频）的大小不同于围绕包含它们的实际DOM元素。我们不确定如何解决这个问题。有两种变体：HTML5视频元素和带背景图像的div（设置为“包含”）。

我的测试是在macOS Sierra上的Chrome 64.0上进行的，但我们在Windows上的Chrome上报告了同样的问题。我还没有测试过其他浏览器。

视频元素

这是一个显示问题的极小测试用例的示例。调整浏览器的宽度，直到您在视频旁边看到一条红线，或者视频溢出其元素（如下面的屏幕截图所示）。

video {
  background-color: red;
  width: 32%;
  margin: 0 auto;
  display: block;
}

<video controls src="http://vjs.zencdn.net/v/oceans.mp4">
</video>

或者，作为一个codepen：https://codepen.io/jthomerson/pen/mXrpZr

以下是错误的两种变体：

有没有办法来解决这个问题？ JW Player似乎正在解决这个问题，一些复杂的JS正在观察所有调整大小事件，然后添加动态变换并直接定位到视频元素。有更简单的方法吗？或者，如果这是唯一的方法，那里有一个已经标准化的图书馆吗？ （我们正在使用VideoJS，但这不是VideoJS特有的问题）。

背景图片

同样的事情可能发生在div的大小与背景图像完全相同的宽高比，背景图像使用no-repeat和contain。

.container {
  width: 60%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 1em;
}
.someBox {
  background-color: red;
  background-image: url('https://placebear.com/640/360');
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  display: block;
  padding-top: 56.25%;
}

<div class="container">
  <div class="someBox">
  </div>
</div>

或者，作为一个codepen：https://codepen.io/jthomerson/pen/xYEYZK

以下是错误的示例：

当然，在这种情况下，你可能会说“只需将contain改为cover，这就是为它做的”。这是真的，但在我们的实际用例中，当视频没有播放时，我们使用带有背景图像的div作为视频的海报图像。但是，我们不知道图像的实际宽高比。视频播放器本身的大小始终为16：9，但在某些情况下，我们的客户会上传1：1的海报图片（例如：音乐视频专辑封面），或者4：3或2：1（对于遗留内容，他们没有16：9的内容）。因此，我们无法将contain更改为cover，除非我们以编程方式加载图像，检测其大小，然后如果它实际上是16：9，则使用cover，否则使用contain。

Answer 1

在某些情况下，对我有用的快速“hacky”修复是在封面图像/视频的父元素周围添加一个简单的1px透明边框。

border: 1px solid transparent;