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

I have rectangular, not necessarily square images.

Using Bootstrap’s img-circle, I’d like to get circular crops, not elliptical/non-circular crops of these rectangular images.

How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.

JSFiddle to illustrate the non-circular behavior of non-square img-circle images.

<div class="container-fluid text-center">
    <div class="row">
        <div class="col-xs-12">img-circle test</div>

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/200/200" />
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/200/400" />
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/400/200" />
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />

Enquirer: Abdull


Solution #1:

I see that this post is a little out of date but still…
I can show you and everyone else (who is in the same situation as I was this day) how i did it.

First of all, you need html like this:

<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>

Than your css class will look like this:

/* make it responsive */
max-width: 100%;
/* div height to be the same as width*/

/* make it a circle */

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

It is responsive circle, centered on original image.
You can change width and height not to autofill its parent if you want.
But keep them equal if you want to have a circle in result.

Link with solution on fiddle

I hope this answer will help struggling people. Bye.

Respondent: zds

Solution #2:

I use these two methods depending on the usage. FIDDLE

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


.img-div img{

Respondent: Lokesh Suthar

Solution #3:

You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)

You may want to write a custom CSS class using border-radius where you have more control. If you want it more circular just increase the radius.

    border-radius: 25px;
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />

Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/

I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.

Respondent: Catto

Solution #4:

use this in css

  border:inherit 8px #000000;
  -moz-border-radius-topleft: 75px;

<img class="logo-center"  src="NBC-Logo.png" height="60" width="60">
Respondent: Neeraj Das

Solution #5:

You have to give height and width to that image.

eg. height : 200px and width : 200px
also give border-radius:50%;

to create circle you have to give equal height and width

if you are using bootstrap then give height and width and img-circle class to img

Respondent: Hitesh Modha

Solution #6:

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

$(document).ready(function() {

$(window).resize(function() {
Respondent: ctf0

Solution #7:

You Need to take same height and width

and simply use the border-radius:360px;

Respondent: Pulkit

Solution #8:

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" />
Respondent: Ram

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.