101

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>

3
  • i sit fine??? jsfiddle.net/7c9wjLy6/3 Oct 17, 2014 at 8:54
  • Is there a reason you have margin specified twice with different values?
    – gleenn
    Aug 29, 2016 at 20:41
  • might want to correct the question with removing "Usually", if it is that then none of the css solutions wont cut it.
    – Dejan.S
    Nov 28, 2017 at 11:04

13 Answers 13

135

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>

5
  • 12
    Understood. But why image is not centered in the circle?
    – 49volro
    Oct 17, 2014 at 9:38
  • 1
    True. I think Hiral's solution better suits your needs, and the background-image can be fed dynamically by Wordpress with ease. For some reason I can't solve my solution with text-align: center; so I cant really help you with the centring at the moment :( Oct 17, 2014 at 9:52
  • 1
    This solution does not work with images in landscape orientation. Feb 3, 2016 at 9:50
  • 1
    @49volro if you want the image to be centered, giving it a margin-left of -25% will do the trick.
    – Cameron637
    Jun 15, 2016 at 16:20
  • this makes the image lop sided Oct 24, 2019 at 16:26
89

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">

2
  • 2
    Brilliant! I love this simple, one-step solution. I has to remove the img from the css you provided and add it as a class to the image, but it worked like a charm! Thank you!
    – jord8on
    May 29, 2018 at 7:03
  • 1
    This is great, thank you! Should be the accepted answer imo Nov 4, 2021 at 11:19
23

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>

14

A simple one liner.

clip-path: circle();
10

Try this:

img {
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

DEMO here.

OR:

.rounded {
    height: 100px;
    width: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:url("http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg") center no-repeat;
    background-size:cover;
}

DEMO here.

7
  • 2
    Your demo is not circular.
    – Paulie_D
    Oct 17, 2014 at 8:59
  • Nice, but I can't use background-image because image's URL will generate Wordpress. Can I write: <div class="image-cropper"> <img class="rounded" style="background:url('http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg') center no-repeat; background-size:cover;" /> </div> ?
    – 49volro
    Oct 17, 2014 at 9:19
  • @49volro In such case you can write this: <div class="rounded" style="background-image:url('image url')"></div>, remove image url from css
    – codingrose
    Oct 17, 2014 at 9:24
  • The example worked for me, except it blew up my image. It worked if I put the image inside a div tag and specified the image dimensions in the div. Jun 30, 2017 at 14:48
  • what if you can't use as background image even though ur exampleis not circular it is oval Mar 21, 2018 at 6:41
3

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

}
<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>

2

I know many of the solutions mentioned above works, you can as well try flex.

But my image was rectangular and not fitting properly. so this is what i did.

.parentDivClass {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 20px;
    display: flex;
    justify-content: center;
}

and for the image inside, you can use,

child Img {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

This is helpful when you are using bootstrap 4 classes.

0

The best way I've been able to do this is with using the new css object-fit (1) property and the padding-bottom (2) hack.

You need a wrapper element around the image. You can use whatever you want, but I like using the new HTML picture tag.

.rounded {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* These classes just used for demo */
.w25 {
  width: 25%;
}

.w50 {
  width: 50%;
}
<div class="w25">
<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>
</div>

<!-- example using a div -->
<div class="w50">
<div class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</div>
</div>

<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>

References

  1. CSS Image size, how to fill, not stretch?

  2. Maintain the aspect ratio of a div with CSS

0

The accepted answer probably works for some situations, but it depends on the ratio of the rectangle and any predetermined styles.

I use this method because it's more compatible than solutions only using object-fit:

.image-cropper {
   width: 150px;
   height: 150px;
   position: relative;
   overflow: hidden;
   border-radius: 50%;
   border:2px solid #f00;
}

/* Common img styles in web dev environments */
img {
   height: auto;
   max-width: 100%;
}

/* Center image inside of parent */
img.center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* For horizontal rectangles */
img.horizontal {
   height: 100%;
   width: auto;
   max-width: 9999px; /* max-content fall back */
   max-width: max-content;
}
<div class="image-cropper">
  <img src="https://via.placeholder.com/300x600" class="center" />
</div>

<div class="image-cropper">
  <img src="https://via.placeholder.com/600x300" class="horizontal center" />
</div>

If you run the snippet you can see, for horizontal rectangles we add another class .horizontal.

We override max-width to allow the img to go larger than 100% of the width. This preserves the aspect ratio, preventing the image from stretching.

However, the image will not be centered and that's where the .centered class comes in. It uses a great centering trick to absolute position the image in the center both vertically and horizontally.

More information on the centering at CSS Tricks

More than likely you won't always know what ratio the image will be, so this is why I'd suggest using javascript to target the img and add the .horizontal class if needed.

Here is a stack overflow answer that would work

0
.image-cropper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0px 8px 18px 2px rgba(8, 49, 150, 0.05);
}
.image-cropper img {
    width: 50%;
}
1
  • Add more details to your answer, at least you should explain how this works.
    – Ghost
    Feb 4 at 18:52
0

just use object-fit with border-radius to your image directly:

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

You need to use jQuery to do this. This approach gives you the abbility to have dynamic images and do them round no matter the size.

My demo has one flaw right now I don't center the image in the container, but ill return to it in a minute (need to finish a script I'm working on).

DEMO

<div class="container">
    <img src="" class="image" alt="lambo" />
</div>

//script
var container = $('.container'),
    image = container.find('img');

container.width(image.height());


//css    
.container {
    height: auto;
    overflow: hidden;
    border-radius: 50%;    
}

.image {
    height: 100%;    
    display: block;    
}
8
  • 1
    Definitely don't need jQuery. See accepted answer or @Tom's
    – abettermap
    Feb 19, 2017 at 3:05
  • @abettermap those solution don't have dynamic height, if you read the question, "Usually it's a rectangle form." meaning not always, therefor I get the image height with javascript. Seo value is lost with Toms solution. So read and think best pracitce also before downvoting.
    – Dejan.S
    Feb 20, 2017 at 11:14
  • The answers using background-image have dynamic height in the sense that the image will fill the circular space regardless of what the height is, which I think was the OP's goal. Re: best practices, I think some might argue that not using JS for styling would be best practice. You have a point with SEO, however, so I will edit your response. Feel free to edit further.
    – abettermap
    Feb 26, 2017 at 18:32
  • This "answer" should be deleted.
    – reformed
    Jun 15 at 21:48
  • @reformed the answer was made in 2014 and css has evolved in the past 9 years, also care to motivate the "constructive feedback" as to why it should be deleted?
    – Dejan.S
    Jun 21 at 22:18
-2

insert the image and then backhand all you need is:

<style>
img {
  border-radius: 50%;
}
</style>

** the image code will be here automatically**

1
  • The OP wanted a "circle", your example is only rounding the edges, which if the image is rectangular, the result would be an oval.
    – stldoug
    Dec 2, 2019 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.