padding-bottom控制高度有疑问，另图片显示有问题

1、

这部分。icons的padding-bottom是它自身的宽度的25%吗？icon的padding-bottom和它的width一样，都是它父级元素宽度的25%？它是谁的25%是根据什么决定的呢，怎么一会是它自身的宽度一会又是它父元素的宽度了？

2、图片不知道为什么显示的总是原始尺寸，从头到尾都一直是这样特别大，不像老师视频里那样设置了个啥以后就局限在容器里了。

<template>

  <div class="icons">

    <div class="icon">

      <div class="icon-img">

        <div class="icon-img-content">

          <img

            src="http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png"

          />

        </div>

      </div>

      <p class="icon-desc">热门景点</p>

    </div>

  </div>

</template>

<script>

export default {

  name: "HomeIcons"

};

</script>

<style lang="stylus" scoped>

@import '~styles/varibles.styl'

.icons

    overflow hidden

    height 0

    padding-bottom 50%

    .icon

        position relative

        overflow hidden

        float left

        width 25%

        height 0

        padding-bottom 25%

        .icon-img

            position absolute

            top 0

            left 0

            right 0

            bottom .44rem

            box-sizing border-box

            padding .1rem

            .icon-img-content

                display block

                margin 0 auto

                height 100%

        .icon-desc

            position absolute

            left 0

            right 0

            bottom 0

            height .44rem

            line-height .44rem

            text-align center

            color $darkTextColor

</style>