I have rectangular, not necessarily square images.
Using Bootstrap\'s img-circle, I\'d like to get circular crops, <
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
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">
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.
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.
You Need to take same height and width
and simply use the border-radius:360px;
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%
}