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  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    lt div class  container-fluid text-center  gt       lt div class  row  gt           lt div class  col-xs-12  gt img-circle test lt  div gt       lt  div gt        lt div class  row  gt           lt div class  col-xs-6  gt               lt img class  img-responsive  src  http   placekitten com g 200 200    gt           lt  div gt           lt div class  col-xs-6  gt               lt img class  img-responsive img-circle  src  http   placekitten com g 200 200    gt           lt  div gt       lt  div gt        lt div class  row  gt           lt div class  col-xs-6  gt               lt img class  img-responsive  src  http   placekitten com g 200 400    gt           lt  div gt           lt div class  col-xs-6  gt               lt img class  img-responsive img-circle  src  http   placekitten com g 200 400    gt           lt  div gt       lt  div gt        lt div class  row  gt           lt div class  col-xs-6  gt               lt img class  img-responsive  src  http   placekitten com g 400 200    gt           lt  div gt           lt div class  col-xs-6  gt               lt img class  img-responsive img-circle  src  http   placekitten com g 400 200    gt           lt  div gt       lt  div gt    lt  div gt

User · Answer

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.

_x000D_

.CattoBorderRadius_x000D_
{_x000D_
    border-radius: 25px;_x000D_
}

_x000D_

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

_x000D_

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.

User · Answer

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

User · Answer

I use these two methods depending on the usage  FIDDLE   lt div class  img-div  gt   lt img src  http   placekitten com g 400 200    gt   lt  div gt   lt div class  circle-image  gt  lt  div gt   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

User · Answer

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

User · Answer

You Need to take same height and width  and simply use the border-radius 360px

User · Answer

You could simply use  rounded-circle bootstrap     lt img class  rounded-circle  src  http   placekitten com g 200 200   gt    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     lt img class  rounded-circle  style  height 100px  width  100px  src  http   placekitten com g 200 200    gt

User · Answer

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      lt img class  logo-center   src  NBC-Logo png  height  60  width  60  gt

User · Answer

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    lt div class  circle-avatar  style  background-image url http   placekitten com g 200 400   gt  lt  div gt    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

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

Examples related to css

Examples related to twitter-bootstrap-3