乐鱼电竞

  • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    如何使用CSS控制视频的宽高？

    更新时间:2020年12月23日16时45分 来源:乐鱼电竞 浏览次数:

    好口碑IT培训

    　　在网页中嵌入视频时，经常会为video标签添加宽高，给视频预留一定的空间。给视频设置宽高属性后，浏览器在加载页面时就会预先确定视频的尺寸，为视频保留合适大小的空间，保证页面布局的统一。为video标签添加宽、高的方法十分简单，可以运用width和height属性直接为video标签设置宽高。示例代码如下。

    占位色块

    占位色块

    　　运行示例代码，效果如图1所示。

    　　图1 定义视频宽高

    　　此时如果更改示例中的代码，删除视频的宽度和高度属性，修改后的代码如下：

    video{

  background:#F90;

  float:left; 

}

    　　保存HTML文件，刷新页面，效果如图2所示。

    　　图2 删除视频宽高

    　　从图2可以看出，视频和其中一个灰色文本�？楸患返搅舜蠛凶酉旅�。这是因为未定义视频宽度和高度时，视频会按原始大小显示，此时浏览器因为没有办法控制视频尺寸，只能按照视频默认尺寸加载视频，从而导致页面布局混乱。

    　　注意：

    　　通过width和height属性来缩放视频，这样的视频即使在页面上看起来很�。脑即笮∫廊幻槐�，因此在实际工作中要运用视频处理软件(如“格式工厂”)对视频进行压缩。

    猜你喜欢：

    HTML5怎样直接调用网络音频视频文件？

    网页一般用什么工具布局？常用的网页流程布局介绍

    怎样在列表中嵌套多重子列表【web前端技术文章】

    乐鱼电竞web前端培训课程

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】