CSS--一些我后面学习到的属性（object-fit）

前言

这里我将会向大家介绍一些我在学习中学会的一些新属性（虽然不是特别热门但在某些情况下很好用），当然我也会不断更新！！

正题

object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
这里可能就有人会问了什么是可替换元素呢？
我简单科普下：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 iframe元素，可能具有自己的样式表，但它们不会继承父文档的样式。
常见的可替换元素有：
iframe
video
embed
img

我们来举个例子：
正常情况下这些可替换元素会比较大，直接放进去会溢出，这个时候我们一般会设置可替换元素宽高都为100%,但这种方法要想让元素能完全覆盖大盒子的前提是：比例相同！！不然就会出现下面的情况：

<div class="box">
        <video src="../112/077680587_main_xl.mp4"></video>
    </div>

.box{
            width: 300px;
            height: 300px;
            background-color: red;

        }
        video{
            width: 100%;
            height: 100%;
        }

这里很明显的就没有占满这个盒子，如果加上这个属性就不一样了！

object-fit: cover;

下面再来讲一下它的可选值：

contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover（很多时候都是用这一个）
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill(这个也会占满盒子，不过效果不是很好看)
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none
被替换的内容将保持其原有的尺寸。