HTML,img,video无法铺满屏幕解决方法,同视频做网页背景无法全屏的解决方法
我在這里用視頻做為網頁背景,給視頻設了100%寬高,在firebug也顯示video的寬高和頁面是一樣的,但是效果卻沒出來,視頻沒有鋪滿屏幕。下面是我的代碼(原代碼,錯誤的)
<style>
*{margin: 0;padding: 0}
html,body{width: 100%;height: 100%}
video{
width: 100%;height: 100%;
}
</style>
<div>
<video id="fullVideo" class="" muted="muted" autoplay="autoplay" loop="loop"
src="public/webm/v_002.webm"></video>
</div>
出現這個問題的原因是在頁面自適應過程中縮放比例沒處理好
解決方法就是在CSS樣式中加上“object-fit:fill” 樣式
關于這個屬性呢,我發現有兩篇文章介紹的很好,我在這里把鏈接貼出來,一看就懂:
https://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
---------------------
作者:做一個有知識的流氓
原文:https://blog.csdn.net/qq_36370731/article/details/78907284
總結
以上是生活随笔為你收集整理的HTML,img,video无法铺满屏幕解决方法,同视频做网页背景无法全屏的解决方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: h5 video隐藏下方控制条 隐藏原生
- 下一篇: 淘宝卖家使用规蜜和云标签应对买家恶意行为