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

.circular--portrait {
  position: relative;
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  border-radius: 50%;
}
.circular--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="circular--portrait">
  <img src="http://beerhold.it/500/300" />
</div>

Answer 2

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;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

please see the fiddle

Answer 3

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;
}

<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
  <img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>

Please see the fiddle

Answer 4

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;
}

<div class="container">
  <div class="circle">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Chapultepec_Zoo_-_Jaguar_%2802%29.jpg/2560px-Chapultepec_Zoo_-_Jaguar_%2802%29.jpg" />
  </div>
</div>

You can try it out on CodePen