CSS3 object-fit属性使用详解

1 属性使用目的:

　　指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

　　概念普及: 可替换元素     :::    就是会被替换的元素

　　比如一个典型的可替换元素img：

　　<img src=xxx.jpg>

　　我们并没有在img标签中写入任何内容，那它的内容从哪里来的呢？

　　是浏览器去下载src属性给到的图片，并用该图片资源替换掉img标签，而且浏览器在下载前并不知道图片的宽高。

　　所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。

　　在 HTML 中有以下这些空元素(可替换元素)：

　　<area> <base> <br> <col> <colgroup> <command> <embed> <hr> <img> <input>

　　<keygen> <link> <meta> <param> <source> <track> <wbr>

 

2 属性值及其含义:

 

• fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
• contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
• cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
• none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
• scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

3 效果呈现: