遇到这个属性,是在给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;)的更多相关文章

  1. flutter图片铺满父框

    正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...

  2. video自动填充满父级元素

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

  3. video作为背景全屏铺满问题

    项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...

  4. CSS(十三).高度如何铺满全屏

    该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...

  5. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  6. Unity2D 背景图铺满与Camera.Size的计算公式

    在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...

  7. 注意padding-top 百分比定义基于父元素宽度的百分比上内边距!!是基于宽度

    定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...

  8. 寻找对象在父元素下的index

    方法一. window.onload=function(){    //寻找对象在父元素下的index    function getIndexParent(element){         var ...

  9. input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素

    http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...

随机推荐

  1. Jenkins高危代码执行漏洞检测/开源漏洞靶场

    漏洞细节可以参看安全客的文章:https://bbs.ichunqiu.com/thread-22507-1-1.html Jenkins-CLI 反序列化代码执行(CVE-2017-1000353) ...

  2. 如果你在it院校学习累了,你能干什么?

    文章来源i春秋,未经允许不得转载    工具链接https://bbs.ichunqiu.com/portal.php 如果你在国内的it院校累了,有些厌倦了,你该怎么办?    分享一些joke以前 ...

  3. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  4. vue 自动化部署 jenkins 篇

    前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署.这种重复性的工作,确实有点让人烦,而且效率也不高. 本文基于 vue 的前端项目. GitHub 的代码仓库,简 ...

  5. 【sping揭秘】20、spring的orm

    面向对象的操作方式,spring统一定义在org.springframework.jdbc.object以RdbmsOperation作为顶层抽象定义 Spring对各种ORM的集成 Spring的集 ...

  6. .NetCore使用skywalking实现实时性能监控

    一.简介 很久之前写了一篇 <.Net Core 2.0+ InfluxDB+Grafana+App Metrics 实现跨平台的实时性能监控>关于NetCore性能监控的文章,使用Inf ...

  7. spring cloud+.net core搭建微服务架构:服务发现(二)

    前言 上篇文章实际上只讲了服务治理中的服务注册,服务与服务之间如何调用呢?传统的方式,服务A调用服务B,那么服务A访问的是服务B的负载均衡地址,通过负载均衡来指向到服务B的真实地址,上篇文章已经说了这 ...

  8. 关于 Nginx 配置 WebSocket 400 问题

    今天把项目升级了 asp.net core 到 2.1 的版本,使用了 signalr  的功能,由于阿里云不支持 websocket 协议,所以使用了 nginx 代理方式来解决,后续就报了一个登陆 ...

  9. 梯度下降法原理与python实现

    梯度下降法(Gradient descent)是一个一阶最优化算法,通常也称为最速下降法. 要使用梯度下降法找到一个函数的局部极小值,必须向函数上当前点对应梯度(或者是近似梯度)的反方向的规定步长距离 ...

  10. JAVA开发者的Golang快速指南

    Golang作为Docker.Kubernetes和OpenShift等一些酷辣新技术的首选编程语言,越来越受欢迎.尤其它们都是开源的,很多情况下,开源是非常有价值的.深入学习阅Golang等源代码库 ...