36

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>

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

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

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

</div>
zessx
  • 68,042
  • 28
  • 135
  • 158
Abdull
  • 26,371
  • 26
  • 130
  • 172
  • Remember to include your JSFiddle code in SO (at least the most important part), to avoid problems in case of broken links or closed website. – zessx Feb 18 '14 at 13:32

8 Answers8

42

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:

div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;

/* make it a circle */
border-radius:50%;

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

zds
  • 914
  • 1
  • 10
  • 22
13

I use these two methods depending on the usage. FIDDLE

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

div.img-div{
    height:200px;
    width:200px;
    overflow:hidden;
    border-radius:50%;
}

.img-div img{
    -webkit-transform:translate(-50%);
    margin-left:100px;
}

.circle-image{
    width:200px;
    height:200px;
    border-radius:50%;
    background-image:url("http://placekitten.com/g/200/400");
    display:block;
    background-position-y:25% 
}
Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
  • 1
    In my particular case, images may have different sizes, not necessarily 200px x 400px. Is it possible to abstract your provided CSS so that it works with any image size? – Abdull Feb 18 '14 at 13:59
  • Yes Ofcourse. Just the divs have these dimensions. You can have any dimensions of divs and have to do a little bit of calculation for your images. For example in first case I translated the image 50% to the left and 100px(50% of div) margin to left; That centers the image. You can set img height to 100%; – Lokesh Suthar Feb 18 '14 at 14:14
  • Are you going to choose a correct answer or you're still having problems ? – Lokesh Suthar Feb 19 '14 at 09:25
  • Yes, I'm still having problems. I wasn't able to abstract your current answer to work with images of arbitrary size. I tried it with percent-relative height and width - but the results didn't look so well, i.e. images weren't `img-responsive`, weren't circley or weren't centered on the original image. Maybe you still have ideas how to fulfill these requirements? – Abdull Feb 19 '14 at 12:41
  • First of all what do you mean by img-responsive. For a moment stop thinking about bootstrap and write what you want to achieve. Also, Tell me how do you define a center of an image? All we can do is either ensure images are square or crop images so as the content is centered – Lokesh Suthar Feb 19 '14 at 14:39
  • If it is about some kind of profile images, then you'd have to sort out to a facial recognition algorithm which in my opinion is overkill. – Lokesh Suthar Feb 19 '14 at 14:40
  • This is not responsive as the OP requested – circuitry Nov 23 '15 at 02:21
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. 

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

Venkat.R
  • 7,420
  • 5
  • 42
  • 63
Catto
  • 6,259
  • 2
  • 52
  • 55
2

use this in css 

.logo-center{
  border:inherit 8px #000000;
  -moz-border-radius-topleft: 75px;
  -moz-border-radius-topright:75px;
  -moz-border-radius-bottomleft:75px;
  -moz-border-radius-bottomright:75px;
  -webkit-border-top-left-radius:75px;
  -webkit-border-top-right-radius:75px;
  -webkit-border-bottom-left-radius:75px;
  -webkit-border-bottom-right-radius:75px;
  border-top-left-radius:75px;
  border-top-right-radius:75px;
  border-bottom-left-radius:75px;
  border-bottom-right-radius:75px;
}

<img class="logo-center"  src="NBC-Logo.png" height="60" width="60">
Sebastialonso
  • 1,437
  • 18
  • 34
Neeraj Das
  • 21
  • 1
2

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

Hitesh Modha
  • 2,740
  • 5
  • 28
  • 47
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();
});
ctf0
  • 6,991
  • 5
  • 37
  • 46
0

You Need to take same height and width

and simply use the border-radius:360px;

Pulkit
  • 1
0

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" />
Ram
  • 451
  • 10
  • 18