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

Question

似乎有些浏览器在使用百分比定位和大小来呈现图像或视频媒体时，偶尔会将媒体内容（图像或视频）的大小与包含它们的DOM元素舍入不同。我们不确定如何解决这个问题。有两种变体：HTML5视频元素和带有背景图像（设置为“contain”的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 来解决此问题，该 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内容的旧内容）。因此，除非我们通过编程方式加载图像、检测其大小，并且如果实际上是16：9，则使用cover，否则使用contain，否则我们无法将contain更改为cover。

- Jeremy Thomerson

---

另一个有趣的事情是，如果您添加 background-position: center ;，这个像素会向左移动！ - Temani Afif

使用 background-size: 100% 100%; 不是一种解决方案吗？与 cover 不同，它会拉伸图像以隐藏该像素，而不是隐藏图像的像素。 - Temani Afif

@TemaniAfif 不行，那样做不行 - 看看为什么我们不能使用 cover 的部分；因为有时客户端会有一个非16:9的图像。(好吧，我们可以这样做，但是我们必须在使用它作为背景之前检测实际图像尺寸，而且那很丑陋)。 - Jeremy Thomerson

Answer 1

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

border: 1px solid transparent;

- Adrian Puescu