- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class
- CSS 创建
- CSS 背景
- CSS 文本格式
- CSS 字体
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 盒子模型
- CSS 边框
- CSS 轮廓（outline）
- CSS Margin(外边距)
- CSS Padding（填充）
- CSS 分组 和 嵌套 选择器
- CSS 尺寸 (Dimension)
- CSS Display(显示) 与 Visibility（可见性）
- CSS Positioning(定位)
- CSS Float(浮动)
- CSS 布局 - 水平 & 垂直对齐
- CSS 伪类(Pseudo-classes)
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 提示工具(Tooltip)
- CSS 图片廊
- CSS 图像透明/不透明
- CSS 图像拼合技术
- CSS 媒体类型
- CSS 属性 选择器
- CSS总结
- 响应式 Web 设计 - 框架
- CSS 响应式设计
响应式 Web 设计 - 视频(Video)
使用 width 属性
如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：
实例
video {
width: 100%;
height: auto;
}
width: 100%;
height: auto;
}
注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。
使用 max-width 属性
如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：
实例
video {
max-width: 100%;
height: auto;
}
max-width: 100%;
height: auto;
}
在网页中添加视频
我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域：
实例
video {
width: 100%;
height: auto;
}
width: 100%;
height: auto;
}
上一篇：响应式 Web 设计 - 图片
下一篇：响应式 Web 设计 - 框架
关注微信小程序
扫描二维码
程序员编程王
