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

Johnny's solution is good. I found that adding min-width:100%, really helps images fill the entire circle. You could do this with a combination of JavaScript to get optimal results or use ImageMagick - http://www.imagemagick.org/script/index.php if you're really serious about getting it right.

.image-cropper {

  width: 35px;

  height: 35px;

  position: relative;

  overflow: hidden;

  border-radius: 50%;

}

.image-cropper__image {

  display: inline;

  margin: 0 auto;

  height: 100%;

  min-width: 100%;

}