CSS3 object-fit 属性浅析示例

现代web环境，响应式布局都比较常见。
如果一张图片使用固定尺寸，在处理这些有着固定尺寸的图片的时候，就会遇到障碍。
例如，一个2:1的图片，永远要等比例充满容器。但是，随着浏览器宽度不一样，容器的长宽比有也肯定不一样。
我们更早的时候使用JS去把控，或者使用background-size处理类似效果。
如今，正是为了应对类似这样的响应式需求，object-fit和object-position才应运而生。下面我们只讲object-fit属性。 object-position主要就是控制位置，这个大家可以网搜。 object-fit和object-position之间的关系有点类似于background-size和background-position。无论是，关系还是属性值，都有相似之处。
因此，我们在理解object-fit和object-position的时候，可以或多或少映射background-size和background-position。

下面的一系列示例就是向大家演示，object-fit取不同值时，图片的变化。
我们给图片套一个figure标签，即figure是img的父级容器。

默认

figure {//figure是父容器。
	width: 200px;
	height: 200px;
	background-color: #333333;
	position: relative;
	overflow: hidden;
}
img{
	width: 100%;
	height: 100%;
}

尺寸继承父级尺寸，由于父级容器比例与图片比例不一致，所以图片有变形。

cover

img{
	object-fit:cover;
	width: 100%;
	height: 100%;
}

说明：图片刚刚好填充了容器。图片也不变形。只是边缘多出去的内容被裁掉了。

fill

img{
	object-fit:fill;
	width: 100%;
	height: 100%;
}

说明：这个图片跟默认提供的样式差不多。填充整个父容器。

contain

img{
	object-fit:contain;
	width: 100%;
	height: 100%;
}

说明：图片比例不变的情况下，内容全部显示出来。

none

img{
	object-fit:none;
	width: 100%;
	height: 100%;
}

说明：没有object-fit声明。图片多大就显示多大。

针对IE实现cover效果

img{		
	max-width: 1000%;
	max-height: 100%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
}

IE是不支持object-fit属性的。那怎么办？就用上面的方法，让图片有object-fit:cover的效果。