（1）先上代码，即：
1 <template> 2 <div class="icons"> 3 <div class="icon"> 4 <div class="icon-img"> 5 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 6 </div> 7 <p class="icon-desc">热门景点</p> 8 </div> 9 <div class="icon"> 10 <div class="icon-img"> 11 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 12 </div> 13 <p class="icon-desc">热门景点</p> 14 </div> 15 <div class="icon"> 16 <div class="icon-img"> 17 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 18 </div> 19 <p class="icon-desc">热门景点</p> 20 </div> 21 <div class="icon"> 22 <div class="icon-img"> 23 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 24 </div> 25 <p class="icon-desc">热门景点</p> 26 </div> 27 <div class="icon"> 28 <div class="icon-img"> 29 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 30 </div> 31 <p class="icon-desc">热门景点</p> 32 </div> 33 <div class="icon"> 34 <div class="icon-img"> 35 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 36 </div> 37 <p class="icon-desc">热门景点</p> 38 </div> 39 <div class="icon"> 40 <div class="icon-img"> 41 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 42 </div> 43 <p class="icon-desc">热门景点</p> 44 </div> 45 <div class="icon"> 46 <div class="icon-img"> 47 <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" /> 48 </div> 49 <p class="icon-desc">热门景点</p> 50 </div> 51 </div> 52 </template> 53 54 <script> 55 export default { 56 name: 'HomeHeader' 57 } 58 </script> 59 60 <style lang="stylus" scoped> 61 .icons 62 overflow: hidden 63 height: 0 64 padding-bottom: 50% 65 background: green 66 .icon 67 position: relative 68 float: left 69 overflow: hidden 70 height: 0 71 padding-bottom: 25% 72 width: 25% 73 border: .01rem solid #fff 74 .icon-img 75 position: absolute 76 top: 0 77 left: 0 78 right: 0 79 bottom: 1.4rem 80 background: #00bcd4 81 .img-content 82 height: 100% 83 display: block 84 margin: 0 auto 85 .icon-desc 86 position: absolute 87 left: 0 88 right: 0 89 bottom: 0 90 height: 1.4rem 91 line-height: 1.4rem 92 text-align: center 93 color: #333 94 </style>
（2）首先设置大div的高度，这里通过设置icons,即：
height: 0
padding-bottom: 50%
可以实现大div高度为长度的50%，50%是根据父元素的宽度作为标准的。
（3）然后设置小div的高度和宽度，即icon为：
height: 0
padding-bottom: 25%
可以实现小div的高度为元元素宽度的25%，同时设置小div的宽度为：
width: 25%
这样就实现了将大div分割成8个小的div。
（4）此时将图片导入到HTML中，发现明显被撑开了，这时候icon中设置为overflow；然后要确定图片的位置，即在图片外层包裹1层div为icon-img，然后在这个样式中确定图片的位置，即：
position: absolute
top: 0
left: 0
right: 0
bottom: 1.4rem
bottom设为1.4rem是为了给下方的文字留出空间。当然这样定义后父元素icon要设置position：relative。
（5）这时图片的位置是正确的，但图片太大了。因此在<img>中增加1个样式img-content，将其height设为100%,然后希望图片能够居中，故在img-content中设置：
display: block
margin: 0 auto
这样图片就能居中显示。
（6）然后就是设置下方的文字，给p标签外层加1个div，样式为icon-desc，设置为
position: absolute
left: 0
right: 0
bottom: 0
这里不用设置top了，然后这样就能确定文字的位置，然后设置其高度等于之前小div - 图片剩余的高度，同时设置行高等于此高度，可以实现文字的上下居中。