Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Circular Cropping of Rectangle Image

Tags:

html

css

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:

Code

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}
<div class="image-cropper">
   <img src="https://sf1.autojournal.fr/wp-content/uploads/autojournal/2012/07/4503003e3c38bc818d635f5a52330d.jpg" class="rounded" />
</div>
like image 323
49volro Avatar asked Oct 17 '14 08:10

49volro


People also ask

How do I crop a rectangle image into a circle in CSS?

border-radius: 50%; is what gives us the circular shape. Applying margin-left = -25%; moves the image to the left, effectively centering it. If you don't want to center your image in the circular frame we've just created for it, just leave this line out.

How do I crop a circle in CSS?

We can crop an image to a circle by adding a border-radius property with value 50% to the square image. Similarly, we can crop background-image to circle by adding border-radius value to 50% .


3 Answers

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

This would work:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>
like image 165
Johnny Kutnowski Avatar answered Oct 18 '22 19:10

Johnny Kutnowski


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;
}
<img src="https://picsum.photos/200/300" class="rounded">
like image 68
Dispenser Avatar answered Oct 18 '22 19:10

Dispenser


If you can live without the <img> tag, I suggest you use the photo as a background image.

.cropcircle{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: #eee no-repeat center;
    background-size: cover;
}

#image1{
    background-image: url(http://www.voont.com/files/images/edit/7-ridiculous-ways-boost-self-esteem/happy.jpg);
}
<div id="image1" class="cropcircle"></div>
like image 23
Tom Avatar answered Oct 18 '22 21:10

Tom