Bootstrap 3: utiliser img-circle, comment obtenir circle à partir d'une image non-carrée?

je vois que ce post est un peu hors de date, mais encore... Je peux vous montrer et tout le monde (qui est dans la même situation que j'étais ce jour) comment je l'ai fait.

tout d'Abord, vous avez besoin de html comme ceci:

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

Que votre classe css ressemble à ceci:

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;
}

c'est un cercle réactif, centré sur l'image originale. Vous pouvez modifier width et height ne pas auto-remplir son parent si vous voulez. Mais gardez à l'égal si vous voulez avoir un cercle dans résultat.

Lien avec la solution sur tripoter

j'espère que cette réponse aidera les personnes en difficulté. Revoir.

j'utilise ces deux méthodes selon l'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% 
}

vous avez dit que vous vouliez des cultures circulaires à partir de recangles. Cela pourrait ne pas être possible avec les 3 classes de bootstrap populaires (img-round; img-circle; img-polaroid)

Vous pouvez écrire une coutume de la classe CSS à l'aide border-radius où vous avez plus de contrôle. Si vous la voulez plus circulaire, augmentez le rayon.

.CattoBorderRadius
{
    border-radius: 25px;
}

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

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

je sais que c' ce n'est peut-être pas le rayon parfait, mais je pense que votre réponse utilisera une classe CSS personnalisée. Espérons que cette aide.

Utilisez ceci dans 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">

vous devez donner la hauteur et la largeur de cette image.

par exemple. height : 200px et width : 200px aussi donner border-radius:50%;

pour créer un cercle, vous devez donner une hauteur et une largeur égales

si vous utilisez bootstrap puis donner la hauteur et la largeur et img-circle classe img

le problème est principalement dû au fait que la largeur doit être == à la hauteur, et dans le cas de bs, la hauteur est définie à auto donc voici une correction pour cela dans js à la place

function img_circle() {
    $('.img-circle').each(function() {
        $w = $(this).width();
        $(this).height($w);
    });
}

$(document).ready(function() {
    img_circle();
});

$(window).resize(function() {
    img_circle();
});

vous devez prendre la même hauteur et la même largeur

et utilisez simplement les border-radius: 360px;