图片铺满展示不变形

如何让不同尺寸的图片内容铺满一个框框展示而且不变形呢？

方法1：背景图 #

是的，用背景图，只需要 bcakground-size: contain; 即可搞定。用起来很方便，除了不太符合语义化。

方法2：object-fit #

这个是css3新增在img上的属性，效果类似于background-size;

object-fit：contain    ===    background-size：contain    保持比例包含，相当于内切
    
object-fit：cover    ===    background-size：cover  保持比例铺满，相当于外切
    
object-fit：fill    ===    background-size：100% 拉伸铺满

使用方法：

<img style="height: 360px;object-fit: contain;width: 54px;" />
    

兼容性参考：https://caniuse.com/#search=object-fit

顺便介绍下object-position吧，参考mdn，很好用的，类似于background-position。主要是处理content-area在元素box-area中的位置。

方法3：scale #

放大也是一个好方法。