Responsive CSS circles

Published March 27, 2019
.* :☆゚

This is a really easy way to create responsive css circles based on percentage widths, without using pseudo elements.

.img-wrapper {
        margin: 1em auto;
        display: block;
        height:0;
        width: 80%; //keep these values the same
        padding-bottom: 80%; //keep these values the same
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }