Bootstrap 3: Using img-circle, how to get circle from non-square image?

Question

I have rectangular, not necessarily square images.

Using Bootstrap\'s img-circle, I\'d like to get circular crops, <

Answer 1

the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead

function img_circle() {
    $('.img-circle').each(function() {
        $w = $(this).width();
        $(this).height($w);
    });
}

$(document).ready(function() {
    img_circle();
});

$(window).resize(function() {
    img_circle();
});

Answer 2

You could simply use .rounded-circle bootstrap.

 <img class="rounded-circle" src="http://placekitten.com/g/200/200"/>

You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.

 <img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />