CSS dig pit crawl pit div aspect equal

Target effect

For such an avatar, the outside is a rounded div inside is an IMG, for the outer div I want to make him height equal to the width.

Discover problems

At the beginning of the set width of 100% and then the height of 100%, the width of the words can be filled with the width of the page, but the height of the parent node will be set to the height of the parent node height, not set the height of the parent node will not have a height.

Solve the problem

Finding the solution on the web is to set the width of the div and then not set the height, and then set his after margin-top to 100%; Because a property similar to margin has a percentage relative to the parent element width

And then on the code

    . head{      position:relative;      width:100%;      border-radius:50%;      Overflow:hidden;      &:after {        content: ';        Display:block;        margin-top:100%; Margin percentage is calculated relative to the parent element width      }      img{        height:100%;        width:100%;        Position:absolute;        top:0;        left:0;      }    }

　　

CSS dig pit crawl pit div aspect equal