css-tag object-fit:封面不会按预期在Chrome中剪辑/裁剪视频.
这仅适用于视频,仅适用于Chrome.
Chrome中的图片没问题.
在所有其他测试的浏览器中,图像和视频都运行良好.
更改浏览器窗口大小时会看到效果.由于高度大,宽度小(以及高度小,宽度大),视频开始重叠,这是错误的.图像不重叠,因此是正确的.
视频(带熊)应划分为50%的屏幕宽度作为图像(屏幕测试图片):
http://oi68.tinypic.com/x5b3vc.jpg http://oi68.tinypic.com/x5b3vc.jpg
演示代码 –
HTML
<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%; }
怎么解决这个问题?
解决方法
Apply -webkit-border-radius:1px;视频作为针对Chrome的错误
https://bugs.chromium.org/p/chromium/issues/detail?id=400829#c31的解决方法