>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → JavaScript响应式 Web 设计 - 设置视频(Video)大小
发表一个新主题 开启一个新投票 回复文章 您是本文章第 27582 个阅读者 刷新本主题
 * 贴子主题:  JavaScript响应式 Web 设计 - 设置视频(Video)大小 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间：2019-08-15 15:50:47     消息  查看  搜索  好友  邮件  复制  引用
  

JavaScript响应式 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;
    }

程序猿的技术大观园：www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-20 10:52:45 重新编辑]
Java精品书籍推荐
Java最新视频教程推荐
  Java面向对象编程-->图形用户界面（下）
  JavaWeb开发-->Servlet技术详解（Ⅱ）
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->用Spring整合CXF发布Web服务
  精通Spring-->
  Vue3开发-->通过Vuex进行状态管理
本站其他相关文章
  键盘按键与 键码对照表
  大部分人都会做错的经典JS闭包面试题
  最新的Vue面试题大全含源码级回答，吊打面试官系列
  Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
  彻底明白VUE中的done参数和函数作用
  Vue+Vant中van-list请求数据(数据请求调用公用方法)
  vue封装翻转卡片效果
  JavaScript Date 对象
  Javascript DOM封装方法汇总
  CSS padding（填充）
  CSS 盒子模型
  JavaScript 测试 jQuery
  JavaScript HTML DOM 节点列表
  JavaScript基础入门
  DTD - XML 构建模块
  更多...
 IPIP: 已设置保密
楼主      
共1页 1条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

中文版权所有： JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶，分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权，请与本站管理员联系。