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>
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.
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%
}
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.
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">
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
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();
});
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" />
Vous devez prendre la même hauteur et la même largeur
et utilisez simplement leborder-radius: 360px;