// Fine Circle Responsive Image // Inspired by stackoverflow.com/a/6615994/10194811

container {

display: inline-block;
position: relative;
width: 100%;

}

dummy {

padding-top: 100%; /* 1:1 aspect ratio */

}

element {

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

}

.circle-image {

width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;

}