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:

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>

Is there a reason you have margin specified twice with different values? — gleenn, Aug 29 '16 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 '17 at 11:04

score 134 · Accepted Answer · edited Sep 17 '20 at 14:00

134

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>

edited Sep 17 '20 at 14:00

cloned

6,346
4
26
38

answered Oct 17 '14 at 09:14

Johnny Kutnowski

2,340
1
13
15

11

Understood. But why image is not centered in the circle? – 49volro Oct 17 '14 at 09: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 :( – Johnny Kutnowski Oct 17 '14 at 09:52
1

This solution does not work with images in landscape orientation. – Wolfgang Ziegler Feb 03 '16 at 09: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 '16 at 16:20
this makes the image lop sided – Peter the Russian Oct 24 '19 at 16:26

score 84 · Answer 2 · edited May 04 '22 at 09:10

84

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

edited May 04 '22 at 09:10

HynekS

2,738
1
19
34

answered Mar 15 '18 at 17:17

Dispenser

1,111
7
9

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 '18 at 07:03
1

This is great, thank you! Should be the accepted answer imo – Rolv Apneseth Nov 04 '21 at 11:19

score 23 · Answer 3 · answered Oct 17 '14 at 09:42

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>

score 13 · Answer 4 · edited Sep 28 '22 at 06:18

13

A simple one liner.

clip-path: circle();

edited Sep 28 '22 at 06:18

Trevor

2,511
1
14
25

answered Dec 23 '21 at 12:06

Baabar Ali

171
1
6

codingrose · Answer 5 · 2014-10-17T09:08:28.477

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.

edited Oct 17 '14 at 09:08

answered Oct 17 '14 at 08:56

codingrose

15,563
11
39
58

2

Your demo is not circular. – Paulie_D Oct 17 '14 at 08:59
Nice, but I can't use `background-image` because image's URL will generate Wordpress. Can I write: `

` ? – 49volro Oct 17 '14 at 09:19
@49volro In such case you can write this: [
](http://jsfiddle.net/13u5z2mg/6/), remove image url from css – codingrose Oct 17 '14 at 09: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. – John D. Cook Jun 30 '17 at 14:48
what if you can't use as background image even though ur exampleis not circular it is oval – Aravind Reddy Mar 21 '18 at 06:41
@AravindReddy, you can give as much radius as much required. 50% will make it round, however, you can give lesser as per requirements. – codingrose Mar 21 '18 at 07:44
I would appreciate if persons who down voted left comments for the reason! – codingrose Jun 29 '19 at 10:04

score 3 · Answer 6 · answered Sep 27 '15 at 11:41

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>

score 2 · Answer 7 · edited Jun 06 '18 at 10:33

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.

score 0 · Answer 8 · edited Jun 20 '20 at 09:12

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

Jared Rice · Answer 9 · 2021-01-20T23:01:45.680

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

score 0 · Answer 10 · edited Feb 04 '23 at 18:55

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

edited Feb 04 '23 at 18:55

Kevin M. Mansour

2,915
6
18
35

answered Feb 04 '23 at 17:09

surbhi241

81
1
2

Add more details to your answer, at least you should explain how this works. – Kevin M. Mansour Feb 04 '23 at 18:52

Dejan.S · Answer 11 · 2014-10-17T09:35:15.807

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

edited Oct 17 '14 at 09:35

answered Oct 17 '14 at 09:29

Dejan.S

18,571
22
69
112

1

Definitely don't need jQuery. See accepted answer or @Tom's – abettermap Feb 19 '17 at 03: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 '17 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 '17 at 18:32
This "answer" should be deleted. – reformed Jun 15 '23 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 '23 at 22:18
@Dejan.S 1) OP specifically requested CSS, not jQuery. 2) "You need to use jQuery to do this" is not true. 3) You admit your demo is flawed, and the -4 negative impact likely renders it not worth your time to "fix"/"finish" it. – reformed Jun 23 '23 at 13:47
@reformed Sure fair enough with the CSS, but, what all the answers fail to provide is the dynamic part as the OP clearly state that the dimensions are not known and usually a rectangle as in "not always". Read the comments to my answer here where I also bring up the SEO. Also keep in mind that my answer was made in 2014. As far as the "flaw part", many times giving a OP a hint the solution might come by itself. To be fair the OP never mention "has to be CSS", the lack of a tag does not mean the answer is gone be what someone thinks as they come here for answers to what they don't know right. – Dejan.S Jun 28 '23 at 22:01
@Dejan.S Just FYI I didn't downvote you. I guess I would ask, if you, today, were faced with the same problem as the OP, would you go with the solution presented by this answer here, to solve it? – reformed Jun 29 '23 at 18:32

score -2 · Answer 12 · answered Aug 28 '18 at 17:29

-2

insert the image and then backhand all you need is:

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

** the image code will be here automatically**

answered Aug 28 '18 at 17:29

Megan Rawls

5
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 02 '19 at 20:19

CSS Circular Cropping of Rectangle Image

12 Answers12

References

Linked

Related