似乎有些浏览器在使用百分比定位和大小来呈现图像或视频媒体时,偶尔会将媒体内容(图像或视频)的大小与包含它们的DOM元素舍入不同。我们不确定如何解决这个问题。有两种变体:HTML5视频元素和带有背景图像(设置为“contain”的div)。
我在macOS Sierra上使用Chrome 64.0进行测试,但我们也收到了在Windows上使用Chrome报告相同问题的情况。我还没有测试其他浏览器。
视频元素
以下是一个非常简单的测试用例,显示了此问题。调整浏览器的宽度,直到您看到视频旁边的红色线条或视频溢出其元素(如下面的屏幕截图所示)。
我在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
。
background-position: center ;
,这个像素会向左移动! - Temani Afifbackground-size: 100% 100%;
不是一种解决方案吗?与 cover 不同,它会拉伸图像以隐藏该像素,而不是隐藏图像的像素。 - Temani Afifcover
的部分;因为有时客户端会有一个非16:9的图像。(好吧,我们可以这样做,但是我们必须在使用它作为背景之前检测实际图像尺寸,而且那很丑陋)。 - Jeremy Thomerson