效果展示:
方法一:通过rem来,设置固定的宽高(100%,height:3.75rem)---1rem = 50px
html布局代码
<div class="icon_wrap"> <div class="icon_squ" v-for="item in iconList" :key="item.urlId"> <img class="icon_img" :src="item.imgurl" alt=""> <p class="icon_p">{{item.imgname}}</p> </div> </div>
css代码
.icon_wrap
100%
height: 3.75rem
.icon_squ
float: left
20%
height: 50%
text-align: center
.icon_img
0.8rem
height: 0.8rem
margin:0.3rem 0 0.2rem 0
display: inline-block
.icon_p
color: #000
方法二:通过比例来写样式---1rem = 50px
html布局代码
<div class="icon_wrap"> <div class="icon_squ" v-for="item in iconList" :key="item.urlId"> <div class="img_wrap"> <img class="icon_img" :src="item.imgurl" alt=""> </div> <p class="icon_p">{{item.imgname}}</p> </div> </div>
css代码
.icon_wrap
overflow: hidden
100%
height: 0
padding-bottom: 50%
.icon_squ
position: relative
overflow: hidden
float: left
20%
padding-bottom: 25%
.img_wrap
position: absolute
top: 0
left: 0
right: 0
bottom: 0.3rem
box-sizing: border-box
padding: 0.3rem
.icon_img
display: block
margin: 0 auto
height: 100%
.icon_p
position: absolute
left: 0
right: 0
bottom: 0
height: 0.44rem
line-height: 0.3rem
text-align: center