background-size布局和移动端图片的等比缩放

大牛推荐的关于css的两本书，特在此记录：

写给大家看的CSS书

CSS禅意花园

background-size:

一：length

该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

二：percentage

该属性是以元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

三：cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
注意：背景图像有可能超出容器。

四：contain

将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
！！！不会出现图片拉伸的情况

五：auto

背景图像的真实大小。

如果背景框是固定的那么就可以用length属性，

使用百分比有时候会出现图片长或者是宽的压缩，如果要使宽为100%，高度自动，则可能会不能铺满背景。同理高也是。

cover压缩图片，压缩时如果宽先到达背景的宽度，则长度不再压缩，所以此时可能就会使图片超出背景框。不太好。

图片自适应问题，图片宽度设置100%，页面加载时会存在高度塌陷的问题，可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100；

将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，但是仅仅对图片高度和宽度缩放的放还不够，还必须添加 background-size:cover, 使这个属性让背景铺满元素的，

处理在响应性布局的时候，背景图片都是等比例缩放，<img /> 引入的图片的话，那么设置她们的width属性为100%；<img src=”” width=”100%”/> 的话，高度就会等比例缩放。

参考博客：http://www.cnblogs.com/tugenhua0707/p/5260411.html#_labe0