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

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

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

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

视频{
背景色：红色；
宽度：32%；
保证金：0自动；
显示：块；
}

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

---

边框：1px实心透明另一件有趣的事情是，如果你添加
背景位置：中心此像素向左移动！使用
背景尺寸：100%100%不是解决方案吗？取消链接封面，它将拉伸图像以隐藏此像素，而不会隐藏图像的一个像素image@TemaniAfif不，那不行-请参阅关于为什么我们不能使用
封面的部分；因为有时候客户端有一个非16:9的映像。（好吧，我们可以这样做，但我们必须先检测实际的图像尺寸，然后再将其用作背景，这很难看）。