object-fix/object-position

---

今日浏览某大神的一篇博文时发现如下写法：

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

竟然可以使图片达到background-image一样的效果，有点小激动，想想之前要实现图片的不变形又铺满外层元素得这样用：

.img-bg {
    height: 200px;
    background: url(./image/demo/daka.jpg) center;
    background-size: cover;
}

马上去查看了一下，它的值有：

fill | contain | cover | none | scale-down

解释如下(非官方，自己理解的)官方解释

• fill(默认)(会变形): 填充，元素填满整个容器，有点类似background-size:100% 100%。
• contain: 包含，类似background-size:contain。
• cover: 覆盖，类似background-size:cover。
• none: 保持原始尺寸大小，就好像只设置了background-image，没有其他background参数。
• scale-down: 按比例缩减，比较none和contain的尺寸, 最终呈现的是尺寸比较小的那个。

那么是否可以直接使用来代替background呢？IE不兼容，但是移动端可以尝试。