web-dev-qa-db-fra.com

Comment afficher l'image du profil de l'utilisateur en cercle?

Je développe un site où l'image de profil des utilisateurs doit être affichée en cercle. Il y a beaucoup de cercles sur ce site et la taille du cercle peut varier.

Je peux afficher correctement les images carrées, mais je rencontre un problème avec les images verticales et horizontales.

Je dois afficher l'image dans un cercle avec les critères ci-dessous:

  • Supposons que la taille de l'image est 500x300. L'image doit être rognée à 100 pixels des côtés droit et gauche afin que le centre de l'image soit affiché. Maintenant, l'image devrait être 300x300, centrée. Ensuite, je dois faire un cercle à partir de cette image. OR masque 100 pixels de droite et de gauche de l'image à l'aide de CSS.
  • Si la taille de l'image est 300x500, les zones supérieure et inférieure doivent être masquées à l'aide de CSS

Que dois-je faire pour résoudre ce problème? Les réponses CSS uniquement sont meilleures pour moi, si possible.

cssimage
26
harsh4u

background-size

MDN - Astuces CSS - Puis-je utiliser

Comme les tailles d’image sont variables, vous voulez vous assurer qu’elles cover la div ainsi que centered qu’elle contient.

L'ajout du border-radius: 50%; vous donnera l'effet de cercle.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.one {
  background-image: url('http://placehold.it/400x200');
}

.two {
  background-image: url('http://placehold.it/200x200');
}

.three {
  background-image: url('http://placehold.it/200x400');
}
<div class="user one">
</div>

<div class="user two">
</div>

<div class="user three">
</div>

En pratique, vous ne voudriez pas avoir une classe pour chaque image, vous devriez donc la spécifier avec un style en ligne dans le balisage:

<div class="user" style="background-image:url('path/to/user/img.png')"></div>

object-fit

MDN - Astuces CSS - Puis-je utiliser

Une alternative plus récente consiste à utiliser la propriété object-fit sur une balise <img> normale. Cela ne fonctionne pas dans IE ou dans les versions antérieures d'Edge.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  object-fit: cover;
}
<img src="http://placehold.it/400x200" class="user">
<img src="http://placehold.it/200x200" class="user">
<img src="http://placehold.it/200x400" class="user">

49
Luke

définir l'image comme arrière-plan, centré.

<div class="image"></div>

css:

.image{
  width: 300px;
  height: 300px;
  border-radius: 50%; /*don't forget prefixes*/
  background-image: url("path/to/image");
  background-position: center center;
  /* as mentioned by Vad: */
  background-size: cover;
}

violon

7
LuudJacobs
<html>  
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;  
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
0
Aadil Masavir

Si vous utilisez bootstrap, vous avez la classe img-circle pour le faire.

0
Nithya Sundar