如何使图片填满整个div标签

如题所述

第1个回答  推荐于2018-04-09
宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,则可以通过宽度的百分比,即宽高比希望与背景图片的宽高比相等来调整。
1、通过一下属性,先填充
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url(../images/aaa.png);
2、然后通过对这个div的before添加样式
content: "";
display: block;
padding-top: 100%; /* 代表1:1,如果是想要5:1就是20%,根据图片大小比例,算一下吧
这块实际上做的就是用before占用一块位置,把相应的高度撑起来。
3、然后里面就可以放任何东西了,当然,里面的东西要保持
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height:100%;
同时,上一层的position要是relative的,这样就可以保证,里面的内容刚刚好在背景图片这个区域了本回答被网友采纳
相似回答