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

posted on 2016-05-12 13:10  过往的雨  阅读(577)  评论(0)    收藏  举报