How to make rectangular image appear circular with CSS

html css css-shapes
Jennifer Vandoni picture Jennifer Vandoni · Mar 22, 2014 · Viewed 175.1k times · Source

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 <div> with a background-image, but only using the <img> tag?

Answer

fzzle picture fzzle · Mar 22, 2014

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:

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle

Related questions

Easier way to create circle div than using an image?

I'm wondering if there's an easier way to create circular divs than what I'm doing now. Currently, I am just making an image for each different size, but it's annoying to do this. Is there anyway using CSS to make …

Read More
CSS Progress Circle

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. …

Read More
How to use CSS to surround a number with a circle?

I would like to surround a number in a circle like in this image: Is this possible and how is it achieved?

Read More