• 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标签的用法:如何自动填充满父div标签

Html5中video标签的用法:如何自动填充满父div标签

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

本文主要包含Html5中video标签等相关知识,匿名希望在学习及工作中可以帮助到您
这篇文章给大家介绍的内容是关于Html5中video标签的用法:如何自动填充满父div标签,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。

object-fit语法

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中div标签的实例代码

HTML5中标签和常用规则有哪些?html5标签以及规则的介绍

以上就是Html5中video标签的用法:如何自动填充满父div标签的详细内容,更多请关注微课江湖其它相关文章!

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

相关文章

  • 2018-12-03H5实现图片压缩与上传
  • 2018-12-03Webkit做到了HTML5方式的客户端数据库存储
  • 2018-12-03HTML5 canvas基本绘图之文字渲染
  • 2018-12-03使用HTML5/CSS3五步快速制作便签贴特效代码示例分享(图文)
  • 2018-12-03HTML5+lufylegend实现游戏中的卷轴 _html5教程技巧
  • 2018-12-03比较总结mui页面跳转方式之间的差异
  • 2017-08-06HTML5几个设计和修改的页面范例分享
  • 2018-12-03html5之创建离线Web应用程序的示例代码
  • 2018-12-03详解HTML5通讯录获取指定多个人的信息的示例代码
  • 2018-12-03苹果官网是怎么做到完美保证多平台浏览体验的?

文章分类

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

最近更新的内容

    • html5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)
    • 通过HTML5的getUserMedia实现拍照功能示例
    • 分享文字溢出隐藏实例
    • 关于移动端h5开发相关内容总结
    • 详细介绍HTML5的article和section的区别
    • html5 乒乓球(碰撞检测)实例二_html5教程技巧
    • HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
    • HTML5与Flash比较的详细介绍
    • IE支持HTML5的解决方法_html5教程技巧
    • svg的案例详解

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

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