关于轮播图内嵌video设置宽高不生效的问题

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45077505/article/details/99689038

在一个PC的展示网站轮播banner内嵌视频的时候遇到了这个问题，

问题描述：在css设置video宽高100%的情况下视频没有全屏显示


然后经过查询资料就发现了一个属性 object-fit: fill;
先放上修改后的效果图

可以看到视频是已经完全填充了浏览器的
接下来就来细扒一下这个属性，

首先来了解一下可替换元素：

	展现效果不是由 CSS 来控制的元素。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
	典型的可替换元素有：iframe、video、embed、img。

object-fit：指定可替换元素 的内容应该如何适应到其使用的高度和宽度确定的框，可以设置五个值

contain：保持宽高比进行缩放，不会变形，宽高比与盒子的宽高比不匹配的情况下会出现盒子填不满的情况，盒子有空白区域。

cover：保持宽高比进行缩放，不会变形，宽高比与盒子的宽高比不匹配的情况下会出现盒子被填满但是会有部分内容超出盒子被隐藏的情况，图片超出盒子。

fill：内容与盒子宽高比相同的情况下会完全填充内容框，宽高比不同的时候会将内容拉伸直到填满盒子，可能会出现内容（图片、视频等）变形的情况。

none：内容保持原有尺寸。

scale-down:内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的内容 尺寸会更小一点。

效果示例：

<div class="box">
	<img src="./大乔.png" alt="">
</div>

.box {
	width: 400px;
	height: 400px;
	border: 5px solid red;
}
img {
	width: 100%;
	height: 100%;
}

图片原始比例：

object-fit: cotain;

object-fit: cover;

object-fit: none;

object-fit: fill;

object-fit: scale-down;

浏览器兼容性：