Crop image circle css

?

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.

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

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.

and for the image inside, you can use,

This is helpful when you are using bootstrap 4 classes.

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

References

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

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

Источник

How to crop images(square,circle) in CSS

In this tutorial, we are going to learn about how to crop images to a square, circle in CSS.

This is the example image we are working.

Cropping image to a square

1. To crop an image to a square first, add a class attribute to that image.
2. Add the same pixels of height and width to that class.
3. Then add an object-fit property with value cover so that the image fits perfectly to the

img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb" class="myimg" />

.myimg width:300px; height:300px; object-fit:cover; >

Cropping background-image to square

1. To crop a background-image first add the same pixels of height and width to that image.
2. Add a background-size property with value cover .
3. At final set background-position property to center .

.row width:300px; height:300px; background-image: url( https://images.unsplash.com/photo-1563805042-7684c019e1cb); background-size:cover; background-position:center; >

If you don’t set background-position to center the image looks like this.

Cropping image to a circle

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

 img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb" class="myimg" />

.myimg width:300px; height:300px; object-fit:cover; border-radius:50%;>

Similarly, we can crop background-image to circle by adding border-radius value to 50% .

.row width:300px; height:300px; background-image: url( https://images.unsplash.com/photo-1563805042-7684c019e1cb); background-size:cover; background-position:center; border-radius:50%;>

Источник

Crop image with circle css

Similarly, we can crop background-image to circle by adding border-radius value to 50%.,We can crop an image to a circle by adding a border-radius property with value 50% to the square image.,To crop an image to a square first, add a class attribute to that image.,In this tutorial, we are going to learn about how to crop images to a square, circle in CSS.

Answer by Amani Bryant

Meta Stack Overflow ,Join Stack Overflow to learn, share knowledge, and build your career.,Thanks for contributing an answer to Stack Overflow!,But my image was rectangular and not fitting properly. so this is what i did.

Answer by Shawn Xiong

First we put a div around that image tag, so that we can work with it a bit easier:,Let’s say we have an image that’s a rectangle, and we want to make it appear like the standard circular profile image. Here’s the code for our image:,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.,We’ve given it the class “image-cropper” because that’s what the CSS we’re going to add to that div is going to do — crop our image.

Let’s say we have an image that’s a rectangle, and we want to make it appear like the standard circular profile image. Here’s the code for our image:

First we put a div around that image tag, so that we can work with it a bit easier:

Answer by Samantha Howard

Use the border-radius property to add rounded corners to an image. 50% will make the image circular:,Learn how to create rounded and circular images with CSS.,If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:,Go to our CSS Images Tutorial to learn more about how to style images.

Step 2) Add CSS:

Use the border-radius property to add rounded corners to an image. 50% will make the image circular:

Answer by Cody Wong

To render a circle, the image must start out as a square.,To work around the problem, we can wrap the img element in a square div element. We then “crop out” the parts of the img element that go beyond the square wrapper div. We can carry this out by setting the wrapper div‘s overflow property to hidden.,By setting all the border-radius properties to 50% of the width/height of the square img element, we end up shaping the img element into a circle:,This technique is best used on square img elements, with the subject located dead-center of the photo. But, we don’t live in a perfect world, so if needed, you can use a wrapper div for rectangular img elements.

The style rule above is the shorthand for:

.circular--landscape < display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; >.circular--landscape img

The amount we nudge the img element is equal to 25% of the width / height of the wrapper div . In this case, we will nudge the image 50px (25% of 200px is 50px) to the left. We can accomplish this by setting the margin-left property of the img element to a negative value:

.circular--portrait < position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; >.circular--portrait img

Answer by Mohamed Jacobs

background-image: url("url"); width:100px; height:100px; background-size:contain; background-position:center; border-radius:50%;

Answer by Tommy Copeland

Profile pictures are often masked by a circle. How can we present our images in such a circle. Lets explore two options, one where we use CSS and one where we actually mask the image data.,To modify the actual image data we can use the element and apply the circular mask to the image itself.,To prevent elliptic cats we have to make sure our image is a square.,Applying a circular mask to an image using CSS is quite straightforward. We only have to set the border-radius property and we’re done.

Applying a circular mask to an image using CSS is quite straightforward. We only have to set the border-radius property and we’re done.

 img 

To prevent elliptic cats we have to make sure our image is a square.

 img 

Okay, but now our cat is squished. Let’s unsquish it using CSS object-fit .

 img 

Let’s use a file input element and apply the mask to the added file.

Answer by Joziah Love

I have an image that has a border-radius making it circular. I have had to set a width and height the same to make it circular.,Is there a way to make it circular without a set width and height so that it then become responsive as at the moment when I resize my browser, it pushes the window’s width out.,If that is the case, then something like this might suit…,are you saying that the image in question is not square?

I’m sure @PaulOB will have a much more elegant method, but if you set a height/width to the container, and then set the height/width of the image to 100%; it becomes responsive (the hard coded sizes guarantees it’s not responsive).

.about-image < width: 100vw; max-width: 20em; height: calc(100vw * (15/16)); max-height: calc(20em * (15/16)); padding: 0; >.about-image img

Источник

How to make rectangular image appear circular with CSS

I’ve used border-radius: 50% or border-radius: 999em , but the problem is the same: with squared images there’s no problem, but with rectangular images I obtain an oval circle. I’m also disposed to crop a part of the image (obviously). Is there’s a way to do that with pure CSS (or at least JavaScript / jQuery), without using a

you can only make circle from square using border-radius. border-radius doesn’t increase or reduce heights nor widths

You should provide an example as a jsfiddle of what you are looking for. Why cannot you use a DIV instead? Why cannot you set background image of IMG tag? Etc..

10 Answers 10

I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline:

Since their issue is with rectangle’s and not squares, this won’t work. Have the div set with a fixed width and height with overflow: hidden. Have the child div set to fill the div and the overflowed areas are gone, so it will be a circle. Also the img should be a display of block to remove possible whitespace.

OP question is too ambiguous, she needs to provide current code she’s using to let us see what she’s talking about. Is IMG got size fixed or not, cannot she used a conatiner, etc. As i read it @David’s comment seems fair

this answer almost worked for me. I just needed to add «background-size:cover» to shrink a larger image down.

My 2cents because the comments for the only answer are getting kinda crazy. This is what I normally do. For a circle, you need to start with a square. This code forces a square and will stretch the image. If you know that the image is going to be at least the width and height of the round div you can remove the img style rules for it to not be stretch but only cut off.

at least you should set min-width:100% and min-height:100% to image to make sure it fills container , width and height might change ratio of image and make it look weird 🙂

Problem with min-width and min-height is that if you have an image that is (much) larger than 150px, only part of the image is shown.

For those who use Bootstrap 3, it has a great CSS class to do the job:

you can only make circle from square using border-radius.

border-radius doesn’t increase or reduce heights nor widths.

Your request is to use only image tag , it is basicly not possible if tag is not a square.

If you want to use a blank image and set another in bg, it is going to be painfull , one background for each image to set.

Cropping can only be done if a wrapper is there to do so. inthat case , you have many ways to do it

Источник