在網頁開發中,經常會出現一種情況:視屏高度不夠,導致無法鋪滿父容器,給網頁的顯示帶來了極大的影響。這時候,我們就需要通過 CSS 樣式表來解決這個問題。
當我們想要讓視屏可以隨父容器的大小而調整時,可以使用以下代碼:
video { width: 100%; height: auto; }
其中,width: 100%;
表示寬度要占滿整個父容器,height: auto;
表示高度不固定,可以根據寬度的變化而自動調整。
但是,在某些情況下,我們可能需要讓視屏高度鋪滿整個父容器,這時候,我們就需要使用下面的代碼:
video { width: 100%; height: 100%; object-fit: cover; }
其中,object-fit: cover;
表示將視屏完全覆蓋父容器,并自動裁剪掉超出部分。
需要注意的是,如果父容器的高度過小,導致視屏高度無法鋪滿整個父容器,這時候,我們可以嘗試調整父容器的高度或者將height: 100%;
修改為一個具體的數值。不過其實,這種情況很少出現,因為我們通常會根據父容器的大小來設置視屏的高度。
上一篇java里的重載和多態
下一篇css視口 不予許縮放