CSS3的background-size属性

以前前端开发时写过一篇html 标签内背景图片自适应div大小，用到了background-size属性，其实也就停留在刚好用来“救急”的地步，并未仔细了解。

其实background-size属性是个CSS3属性，IE9+才支持，自己做做小项目就罢了，在大公司需要考虑兼容性的情况下随手就用往往弄巧成拙。他还有五个不同取值——默认值auto、length、percentage、cover、contain。下面一一介绍：

auto：默认值。图片多大就展示多大，原汁原味，但通常会和容器大小不太匹配。

length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(根据另一个值等比例缩放)

percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(根据另一个值等比例缩放)。

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

其实这些取值都无法保证任何情况下都能自适应容器大小，要想完美自适应，可以使用CSS3的object-fit属性,设置其值为fill即可。可惜IE完全不支持。