• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5中video标签如何设置视频的宽度和高度

html5中video标签如何设置视频的宽度和高度

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5中video标签等相关知识,匿名希望在学习及工作中可以帮助到您
本篇文章给大家带来的内容是关于html5中video标签如何设置视频的宽度和高度,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一般情况下:

<video width="320" height="240" controls="controls">

但是有的时候发现设置了视频的高度却并没有发生变化,我们可以设置其父元素的宽高,让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。

object-fit语法

object-fit:fill | contain | cover | none | scale-down

object-fit取值说明

object-fit主要适合于替换元素,比如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明如下:

  • fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。

  • contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。

  • cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。

  • none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。

  • scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。

相关文章推荐:

HTML5中postMessage实现跨域的代码分析

html5中video(视频)元素的分析

html5中audio(音频)的分析

以上就是html5中video标签如何设置视频的宽度和高度的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

相关文章

  • 2018-12-03HTML5数据推送SSE原理及应用开发的图文详解
  • 2018-12-03h5在网页中上传超大文件教程实例
  • 2018-12-03HTML5通过api实现拖放排序的实例教程
  • 2018-12-03AngularJS中使用HTML5摄像头拍照
  • 2018-12-03通过H5实现拍照功能的实例详解
  • 2018-12-03用H5调用支付微信公众号支付的解析
  • 2018-12-03HTML5 Canvas入门学习教程_html5教程技巧
  • 2018-12-03html5多图片预览上传及点击可拖拽控件的实例分享
  • 2018-12-03Tkinter教程之Canvas篇(2)
  • 2018-12-03做一个表白用的静态网页,有什么好的创意?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 前端HTML5的几种存储方式
    • HTML5触摸事件演化tap事件介绍
    • html5 meter标签是什么意思?html5 meter度量衡如何改变颜色详解
    • HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结
    • 5个你不知道的HTML5的接口介绍_html5教程技巧
    • 用HTML5中的Canvas结合公式绘制粒子运动的教程_html5教程技巧
    • HTML5 在canvas中绘制文本附效果图
    • HTML5 CSS3新的WEB标准和浏览器支持_html5教程技巧
    • HTML5页面调起APP功能的方法试验
    • HTML5 椭圆(蛋)运动的小球的代码实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有