目標效果

對於這麽一個頭像，外面是一個圓角的div裏面是一個img，對於外面的div我要使他高度等於寬度。

發現問題

開始的時候設置寬度為100%然後高度為100%，這樣子對於寬度來說的話可以撐滿頁面寬度，但是高度的話對於設置了父節點高度就會撐滿父節點高度，沒有設置父節點高度就不會有高度。

解決問題

網上找到了解決方法就是設置div的寬度然後不設置高度，然後設置他的after的margin-top為100%；因為類似於margin這種屬性他的百分比相對於父元素寬度

然後上代碼

    .head{
      position: relative;
      width:100%;
      border-radius: 50%;
      overflow: hidden;
      &:after {
        content: ‘‘;
        display: block;
        margin-top: 100%; //margin 百分比相對父元素寬度計算
      }
      img{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

css挖坑爬坑之div高寬相等