CSS 解决Video封面图poster大小适配问题

目前展示效果:

<video src="/uploads/media/20211213/1-211213103I4108.mp4" controls="" poster="imgs/image_cszt@2x.png"></video>

CSS 解决Video封面图poster大小适配问题
问题:
封面图没有撑满整个视频,想让封面图不被挤压变形。

解决:
使用object-fit: cover;属性。
object-fit 属性:指定元素的内容如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签,一般可对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

代码:

video{
  width: 100%;
  object-fit: cover;
}

完成:
CSS 解决Video封面图poster大小适配问题

上一篇:mysqldump、xtrabackup、备份、恢复、nginx、root和alias的区别、域名、


下一篇:【LeetCode通关全记录】9. 回文数