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

Here's a solution that has the image be responsive according to the width of its parent container.

.container {
  /* Feel free to adjust the values here so you can see it being responsive */
  width: 200px;
}

.circle {
  position: relative;
  width: 100%;
  height: 0;
  padding: 100% 0 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid gray;
}

.circle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

You can try it out on CodePen