4

似乎某些浏览器在渲染使用百分比在页面上定位和调整大小的图像或视频媒体时，有时会舍入媒体内容（图像或视频）的大小，而不是舍入包含它们的实际 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 来解决这个问题，这些 JS 正在监视所有调整大小事件，然后将动态变换和定位直接添加到视频元素。有没有更简单的方法？或者，如果这是唯一的方法，是否有一个标准化的图书馆？（我们使用的是VideoJS，但这不是 VideoJS 特有的问题）。

背景图片

如果 div 的大小与背景图像的纵横比完全相同，并且背景图像使用no-repeatand ，也会发生同样的事情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。

4

1 回答 1

1

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

border: 1px solid transparent;

于 2019-03-22T16:30:01.367 回答