当前位置: 首页 > Web前端 > HTML

如何改变video标签的比例(覆盖整个父标签)问题

时间:2023-04-02 23:03:28 HTML

在使用video标签的时候,很多时候我们并不想使用默认的16:9显示比例,而是自定义宽高显示出来后总是受默认比例影响,那么怎么解决呢?其实如果想让视频自动填充慢父div的大小,只需要在video标签中加上style="width=100%;height=100%;object-fit:fill"即可。这是我同事的原代码:无论宽高如何变化,video标签总是按固定比例影响,达不到预期的效果!

页面显示后,总会有一部分空白区域,但无法覆盖整个父框,我试过很多方法,也看过一些帖子,不是很详细,直到查了下object-考虑使用fit来解决问题,具体代码如下:
这样问题就解决了,那么有什么特点呢thisobject-fit?1.Object-fit语法object-fit属性的语法很简单:object-fit:fill|contain|cover|none|scale-down2:object-fit值表示object-fit主要适用于替换元素,如: