教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

如何使用CSS控制視頻的寬高？

更新時(shí)間:2020年12月23日16時(shí)45分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

　　在網(wǎng)頁(yè)中嵌入視頻時(shí)，經(jīng)常會(huì)為video標(biāo)簽添加寬高，給視頻預(yù)留一定的空間。給視頻設(shè)置寬高屬性后，瀏覽器在加載頁(yè)面時(shí)就會(huì)預(yù)先確定視頻的尺寸，為視頻保留合適大小的空間，保證頁(yè)面布局的統(tǒng)一。為video標(biāo)簽添加寬、高的方法十分簡(jiǎn)單，可以運(yùn)用width和height屬性直接為video標(biāo)簽設(shè)置寬高。示例代碼如下。

占位色塊

占位色塊

　　運(yùn)行示例代碼，效果如圖1所示。

　　圖1 定義視頻寬高

　　此時(shí)如果更改示例中的代碼，刪除視頻的寬度和高度屬性，修改后的代碼如下：

video{

  background:#F90;

  float:left; 

}

　　保存HTML文件，刷新頁(yè)面，效果如圖2所示。

　　圖2 刪除視頻寬高

　　從圖2可以看出，視頻和其中一個(gè)灰色文本模塊被擠到了大盒子下面。這是因?yàn)槲炊x視頻寬度和高度時(shí)，視頻會(huì)按原始大小顯示，此時(shí)瀏覽器因?yàn)闆](méi)有辦法控制視頻尺寸，只能按照視頻默認(rèn)尺寸加載視頻，從而導(dǎo)致頁(yè)面布局混亂。

　　注意：

　　通過(guò)width和height屬性來(lái)縮放視頻，這樣的視頻即使在頁(yè)面上看起來(lái)很小，但它的原始大小依然沒(méi)變，因此在實(shí)際工作中要運(yùn)用視頻處理軟件(如“格式工廠”)對(duì)視頻進(jìn)行壓縮。

猜你喜歡：

HTML5怎樣直接調(diào)用網(wǎng)絡(luò)音頻視頻文件？

網(wǎng)頁(yè)一般用什么工具布局？常用的網(wǎng)頁(yè)流程布局介紹

怎樣在列表中嵌套多重子列表【web前端技術(shù)文章】

傳智教育web前端培訓(xùn)課程

0 分享到：
和我們?cè)诰€交談！