background-size 标签详解（举例说明）

之前一直搞不懂background-size的几个属性的使用，今天终于有点小明白了，发几个例子出来

简单的来说

1. 百分比%：相对于父元素的宽度和高度的百分比大小；
2. auto:背景图片保持原来的大小；
3. cover:按照原图片的比例，扩展至足够大，使图片完全覆盖整个背景区域（可能造成图片部分不可见，即被裁剪）；
4. contain:把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域（可能造成图片失真，不再是原来的比例，被拉伸）；

 

咱们举例说明：

图片是600x300的

1.cover:按照原图片的比例，扩展至足够大使图片完全覆盖整个背景区域

（可能造成图片部分不可见，即被裁剪）

.pic{
	width: 1000px;
	height: 500px;
	background: url(html/images/ct.jpg);
	background-size: cover;
}

效果：被拉伸了

如果改成500x500：高度被撑开成500，宽度不够，被裁剪了

 

2.auto：背景图片保持原来的大小；

.pic{
	width: 400px;
	height: 400px;
	background: url(html/images/ct.jpg) no-repeat;
	background-size: 100% auto;
}

效果：宽度变成了400，高度变成200，按比例

如果改成800x800：宽度被撑开成800，宽度撑高成400

 

3.contain：背景图片保持原来的大小；

.pic{
	width: 800px;
	height: 500px;
	border: 3px solid #000;
	background: url(html/images/ct.jpg) no-repeat;
	background-size: contain;
}