video 铺满父元素(object-fit: fill;)
遇到这个属性,是在给video 嵌入一个div时,导致video播放器上下有灰色。在控制台查看video默认样式的时候看到了这个属性。
播放器上下的灰色,不是我们想要的样式,如果能完全覆盖就更好了。
下图是我用object-fit:fill进行修改的
.a{
position: relative;
width: 320px;
height: 200px;
background-color: #B4B4B4;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
video {
object-fit: fill;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
width: 100%;
height: 200px;
}
video 铺满父元素(object-fit: fill;)的更多相关文章
- flutter图片铺满父框
正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...
- video自动填充满父级元素
想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可. obj ...
- video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...
- CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
- CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- Unity2D 背景图铺满与Camera.Size的计算公式
在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...
- 注意padding-top 百分比定义基于父元素宽度的百分比上内边距!!是基于宽度
定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...
- 寻找对象在父元素下的index
方法一. window.onload=function(){ //寻找对象在父元素下的index function getIndexParent(element){ var ...
- input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素
http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...
随机推荐
- Android开发工程师文集-layout_weight讲解
前言 大家好,给大家带来Android开发工程师文集-layout_weight讲解的概述,希望你们喜欢 Layout_weight的相关代码展示 <TextView android:layou ...
- LabVIEW(十三):同一个控件的输入和输出转换
1.实现功能:读取某些文件的数据并将这些数据显示在一个界面上,对界面上的数据进行修改后,将修改后的数据保存到源文件中. 2.显示功能: 程序框图右键>文件I/O>读取分隔符电子表格> ...
- location匹配
=/ 表示精确匹配 www.sensetime.com/ ~ :表示做正则表达式匹配,区分字符大小写 ~* : 表示做正则表达式匹配,不区分大小写 ^~: URI的左半部分匹配,不区分大小写 匹配优 ...
- Java的面向对象(初涉)
Java的面向对象(初涉) 面向对象的分析根据抽象关键的问题域来分解系统.面向对象的设计是一种提供符号设计系统的面向对象的实现过程,它用非常接近实际领域术语的方法把系统构造成"现实世界&qu ...
- HoloLens开发手记-配置开发环境 Install the tools
随着Build 2016开发者大会的结束,HoloLens开发包也正式开放下载.Hololens没有独立的SDK,开发特性被集成到最新的Visual Studio Update 2中.如果你没有Hol ...
- python unittest单元测试
unittest单元测试框架:包含测试用例编写.测试收集\测试用例加载.执行测试用例.生成测试用例报告,同时,更提供了添加断言,异常处理等. 第一:创建测试类,创建测试用例 第二:收集测试用例,加载测 ...
- linux中grep/egrep的使用
grep也是linux中查找的一个利器,运维.程序员必掌握的 下面针对grep的参数进行说明: --color 重点标记匹配到项grep "a word" datafile -- ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十一):服务网关(Zuul)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡 ...
- leetcode — string-to-integer-atoi
/** * Source : https://oj.leetcode.com/problems/string-to-integer-atoi/ * * Created by lverpeng on 2 ...
- docker使用技巧小记
1.在使用docker的时候有很多人习惯使用官方镜像.有的人喜欢自己制作镜像,有的时候都是使用默认的配置启动的服务,或者自己在制作镜像的时候直接将配置文件打包到镜像里面了.有的时候会碰到要修改配置文件 ...