目的是:通过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的,这样就可以保证,里面的内容刚刚好在背景图片这个区域了