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;
  background: url('https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350');
  border-radius: 50%;
  float: left;
  margin: 5px;
}

please see the fiddle