javascript - 处理亚像素渲染时，如何让图片或视频填满整个容器？

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>

或者，作为代码笔: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>

或者，作为代码笔: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;