video標(biāo)簽是不會(huì)自動(dòng)鋪滿整個(gè)div的，即便是給它設(shè)置了高度為100%；所以當(dāng)需要video標(biāo)簽鋪滿整個(gè)div時(shí)，可以給video標(biāo)簽加上‘object-fit:fill’樣式，這樣就可以解決了！

<div class="videoContent"><video class="videoElement" controls preload="auto" width="100%" height="100%"></video> </div> .videoContent{background-color: rgb(40, 46, 83);width: 600px;height: 420px; } .videoElement{object-fit: fill; }

• object-fit 屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度與寬度。
• object-fit 一般用于 img 和 video 標(biāo)簽，一般可以對(duì)這些元素進(jìn)行保留原始比例的剪切、縮放或者直接進(jìn)行拉伸等。
• fill: 默認(rèn)，不保證保持原有的比例，內(nèi)容拉伸填充整個(gè)內(nèi)容容器。

總結(jié)

以上是生活随笔為你收集整理的video标签样式铺满全屏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。