CSS-tag“object-fit:cover”不会裁剪/剪辑Chrome中的视频

css-tag object-fit:封面不会按预期在Chrome中剪辑/裁剪视频.

这仅适用于视频,仅适用于Chrome.
Chrome中的图片没问题.
在所有其他测试的浏览器中,图像和视频都运行良好.

行为应如此图所示(右上角):

https://www.w3.org/TR/2011/WD-css3-images-20110217/img_scale.png

我有created a demo显示错误的行为.

更改浏览器窗口大小时会看到效果.由于高度大,宽度小(以及高度小,宽度大),视频开始重叠,这是错误的.图像不重叠,因此是正确的.

视频(带熊)应划分为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解决方法

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效