CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个DIV

目的是：通过background的一系列属性，让DIV按照背景图片的比例缩放，并让背景图片填充整个DIV

首先我们需要让背景图片在指定的DIV中全部填充显示

之前看有用类似background-attachment:的fix来实现背景图片的填充，但是，貌似是不能按照当前的DIV大小去填充。

我的情况是，宽度按照整个屏幕的百分比来调整，但是高度，又不能通过整个屏幕的高度百分比来调整，而也想通过宽度的百分比，即宽高比希望与背景图片的宽高比相等。

通过一下属性，先填充

background-size:100%auto;

background-repeat:no-repeat;

background-image:url(../images/aaa.png);

然后通过对这个div的before添加样式

content:"";

display:block;

padding-top:100%;/*代表1：1，如果是想要5：1就是20%，根据图片大小比例，那就自己算一下吧*/

这块实际上做的就是用before占用一块位置，把相应的高度撑起来～

然后里面就可以放任何东西了，当然，里面的东西要保持

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

width:100%;

height:100%;

同时，上一层的position要是relative的，这样就可以保证，里面的内容刚刚好在背景图片这个区域了