CSS Circular Cropping of Rectangle Image

Question

I want to make a centered circular image from rectangle photo. The photo\'s dimensions is unknown. Usually it\'s a rectangle form. I\'ve tried a lot of methods:

CSS:

Answer 1

The object-fit property provides a non-hackish way for doing this (with image centered). It has been supported in major browsers for a few years now (Chrome/Safari since 2013, Firefox since 2015, and Edge since 2015) with the exception of Internet Explorer.

img.rounded {
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}