Responsive circle and image fit on circle

Question

I want to create a responsive circle and I want to fit the image. I want to use img tag not with css (background)

Here is what i\'ve tried

.         


        

Answer 1

You can try to do it with SCSS. You just need to create one variable.

$width: calc(100vw / 5);
.circle {
  width: $width;
  height: $width;
  border-radius: 50%;
  float: left;
  margin: 5px;
  background: red;
  overflow: hidden;
}

Please see the fiddle