CSS标签"object-fit:cover“不使用Chrome裁剪/剪辑视频
CSS标签"object-fit:cover“不使用Chrome裁剪/剪辑视频
提问于 2016-04-17 16:43:19
CSS标签object-fit:cover不像预期的那样在Chrome中剪辑/裁剪视频。
这种情况只发生在视频和Chrome中。图像在Chrome中是可以的。在所有其他测试过的浏览器中，图像和视频都运行良好。
行为应如此图像所示(右上)：
我有创建了一个演示，它显示了错误的行为。
当您更改浏览器窗口大小时，您会看到效果。与大高度和小宽度(以及小高度和大宽度)的视频开始重叠，这是错误的。图像不重叠，因此是正确的。
视频(与熊一起)应以50%的屏幕宽度划分为图像(屏幕测试图片)：
演示的代码-
<div class="main">
<div class="container" style="top:0; left:0">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:0%; left:50%">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:25%; left:0;">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:25%; left:50%">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:50%; left:0">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:50%; left:50%">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:75%; left:0">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:75%; left:50%">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
</div>CSS
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
.main{
position:relative;
width: 100%;
height: 100%;
}
.container{
position:absolute;
width:50%;
height:25%;
}
img, video{
position: relative;
object-fit:cover; /* This is the mainly problematic line*/
overflow:hidden;
width:100%;
height:100%;
}如何解决这一问题？
回答 2
Stack Overflow用户
发布于 2018-06-25 04:37:32
将-webkit-border-radius: 1px;应用于视频以解决Chrome的bug https://bugs.chromium.org/p/chromium/issues/detail?id=400829#c31
Stack Overflow用户
发布于 2016-04-22 13:38:42
我也遇到了同样的问题，并通过将overflow:hidden;添加到容器div中来解决它。尝试将它添加到容器类中，它应该可以正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36679287
复制相关文章
相似问题
腾讯云开发者
