CSS 的background-size：cover属性值和contain属性值

1、语法：background-size：length|percentage|cover|contain；

2、参数：参考文章：菜鸟教程

3、浏览器支持：

4、标签定义及使用说明：

5、通常情况下都是使用第1个和第2个属性值，那么后两个如何使用呢？我们来写一个小demo记录一下：

<div id="div4"></div>

#div4{
	width: 1000px;
	height: 500px;
	background-color: red;
	background-image: url(images/hand.jpg);
	background-repeat: no-repeat;
	background-size: 500px 500px;
	/* background-size: 100% 100%; */
	/* background-size: cover; */
	/* background-size: contain; */
}

第一种background-size: 500px 500px;，设置图片的width为500px和height为500px，如果只设置background-size: 500px;那么默认width为500px，而height会根据原图的宽高比进行缩放到合适的大小并设置一个height值，也可以通过这种形式设置background-size: auto 500px；即height为500px，然后根据原宽高比缩放到合适的width并赋值非width。看下图：

第二种background-size: 100% 100%;和第一种使用方式类似，即图片的width占背景width的百分之多少，也可以设置background-size: 100% auto;或background-size: auto 100%；看下图：

第三种background-size: cover;是CSS3的新特性，上面的两种属性值如果不设置为auto的话那么就很难保证元素的宽高比，很有可能使图片拉伸变形，而cover这个属性值则一定会保证图片的原宽高比，并保证一定会覆盖整个背景，但是由于这种原因，如果背景和图片的宽高比不一致那么会导致图片显示不完整。看下图：

第四种background-size: contain;这个属性值也是可以保证图片的宽高比不会被改变，并保证图片一定会完整的显示在背景中，但是如果背景和图片的宽高比不一致则一定会有导致图片repeat重复的平铺在背景中，可以通过设置background-repeat: no-repeat;保证不平铺，但是一定会出现留白。看下图：

你要去做一个大人，不要回头，不要难过。

“可是怎么办，想起你的时候，心还是会疼。”