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

前端 未结 8 1377
生来不讨喜
生来不讨喜 2021-01-31 16:16

I have rectangular, not necessarily square images.

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

相关标签:
8条回答
  • 2021-01-31 16:26

    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

    0 讨论(0)
  • 2021-01-31 16:27

    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">
    
    0 讨论(0)
  • 2021-01-31 16:34

    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.

    0 讨论(0)
  • 2021-01-31 16:34

    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.

    0 讨论(0)
  • 2021-01-31 16:39

    You Need to take same height and width

    and simply use the border-radius:360px;

    0 讨论(0)
  • 2021-01-31 16:42

    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% 
    }
    
    0 讨论(0)
提交回复
热议问题