响应式 Web 设计 - 视频(Video)


使用 width 属性

如果 width 属性设置为 100%,视频播放器会根据屏幕大小自动调整比例:

实例

video {
    width: 100%;
    height: auto;
}

尝试一下 »

注意在以上实例中,视频播放器根据屏幕大小自动调整比例,且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。


使用 max-width 属性

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例,但不会超过其原始大小:

实例

video {
    max-width: 100%;
    height: auto;
}

尝试一下 »

在网页中添加视频

我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域:

实例

video {
    width: 100%;
    height: auto;
}

尝试一下 »
友情链接

搜外友链  |   维家  |   风淋室 >  |   明星排行  |   建筑规范文档  |   惠州保安公司  |   环保空调  |   咒术回战




意见反馈 ||  关于我们 ||  用户协议 ||  隐私保护 ||  商务合作

Copyright © 2020-2022 中华文学苑(华文苑) 京ICP备17037819号

Email:artype@163.com      QQ:262989474

加入华文苑qq群

Android下载