1

Given an image, I am able to make it rounded with the specific height and width using this css:

.image {
  width: 140px;
  height: 140px;
  border-radius: 80px;
}
<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.the-sun.com%2Fwp-content%2Fuploads%2Fsites%2F6%2F2021%2F01%2FNA-Joe-biden-impeachment-comp-2.jpg&f=1&nofb=1"></img>

If the image is not a perfect square though (as shown above), the image will get stretched. How can I shrink the image to fit the width and height specified in the css, and mask any extra image rather than shrinking it to fit?

yalpsid eman
  • 3,064
  • 6
  • 45
  • 71

1 Answers1

2

Use object-fit: cover :

.image {
  width: 140px;
  height: 140px;
  border-radius: 80px;
  object-fit: cover;
}
<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.the-sun.com%2Fwp-content%2Fuploads%2Fsites%2F6%2F2021%2F01%2FNA-Joe-biden-impeachment-comp-2.jpg&f=1&nofb=1"></img>
UModeL
  • 1,217
  • 1
  • 10
  • 15
  • 1
    It works very well. Only thing I would change is `border-radius: 50%;` because if you change size of image it stays always round. – Deotyma Oct 25 '21 at 15:31
  • @Deotyma: Yes you are right. However, if the fillet size is more than half the size and is the same for all corners, then this is equivalent to 50%. – UModeL Oct 25 '21 at 15:36