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:

CSS:

Answer 1

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

    


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