web-dev-qa-db-fra.com

Bootstrap 3: En utilisant img-circle, comment obtenir un cercle d’image non-carrée

J'ai des images rectangulaires, pas nécessairement carrées. 

En utilisant img-circle de Bootstrap, j'aimerais obtenir des cultures circular, non elliptiques/non circulaires de ces images rectangulaires.

Comment cela peut-il être accompli? Les cultures doivent se comporter de la manière img-responsive et doivent être centrées.

JSFiddle pour illustrer le comportement non circulaire des images img-circle non carrées .

<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>
csstwitter-bootstrap-3
35
Abdull

Je vois que ce message est un peu obsolète mais quand même ... Je peux vous montrer, à vous et à tous les autres (qui se trouve dans la même situation que moi ce jour-là), 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>

Votre classe css ressemblera à 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 sensible, centré sur l'image originale . Vous pouvez changer width et height de ne pas remplir automatiquement son parent si vous voulez . Mais gardez-les égaux si vous voulez avoir un cercle dans le résultat .

Lien avec la solution sur violon

J'espère que cette réponse aidera les personnes en difficulté. Au revoir.

39
zds

J'utilise ces deux méthodes en fonction de l'utilisation. VIOLON

<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% 
}
13
Lokesh Suthar

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

Vous voudrez peut-être écrire une classe CSS personnalisée en utilisant border-radius où vous avez plus de contrôle. Si vous le souhaitez plus circulaire, augmentez simplement le rayon. 

.CattoBorderRadius
{
    border-radius: 25px;
}
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />

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

Je sais que ce n'est peut-être pas le rayon parfait, mais je pense que votre réponse utilisera une classe CSS personnalisée. J'espère que cela t'aides. 

3
Catto

utiliser ceci en 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">
2
Neeraj Das

Vous devez donner hauteur et largeur à cette image.

par exemple. height : 200px et width : 200px donnez également border-radius:50%;

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

si vous utilisez bootstrap , donnez donc la hauteur, la largeur et la classe img-circle à img 

2
Hitesh Modha

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 sur auto, voici donc un correctif pour cela en 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();
});
1
ctf0

Vous pouvez simplement utiliser .rounded-circle bootstrap.

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

Vous pouvez même spécifier la largeur et la hauteur de l'image arrondie en fournissant à l'image un style en ligne, qui remplace la taille par défaut.

 <img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />
0
Ram

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

et utilisez simplement leborder-radius: 360px;

0
Pulkit