Je lisais la documentation de bootstrap et je regarde Stackoverflow pour une réponse et je l'ai trouvée. J'ai vu que le rayon frontalier peut être utilisé dans une valeur de 50% pour faire une image circulaire. J'ai essayé de cette façon, mais cela n'a pas fonctionné, car mon image est un peu grosse. Pour une raison quelconque, il est toujours déformé. Alors j'ai essayé Bootstrap et la même chose m'est arrivée.
Ici, je vais mettre quelque chose de ce que j'ai essayé. ;
Comme vous pouvez le constater, c'est un composant de réaction. Ceci est mon code CSS: Qu'est-ce que j'essaie de faire avec ce CSS consiste à aligner le contenu du composant verticalement. alors je reçois Ce résultat: et ce n'est pas une image circulaire :( Comment puis-je le réparer avec Bootstrap? 
3 Réponses :
Essayez de supprimer la propriété min-hauteur, pour obtenir la photo bien arrondie, vous devez avoir une largeur égale à la hauteur
Le problème est que votre image n'est pas carrée, votre élément ne sera donc pas carré puisqu'il n'y a rien dans votre CSS qui le force à être carré.
en faire une taille fixe, largeur et hauteur, de sorte qu'il soit carré.
Ensuite, utilisez Object-Fit: Couvercle Pour vous assurer que l'image est positionnée correctement à l'intérieur (elle remplira toujours la boîte sans être déformée, les pièces "excédentaires" sont simplement coupées).
Je l'ai fait carré, 300px large et grand, mais si je le rend plus petit, il se déforme. Comment puis-je remédier cela?
Assurez-vous que rien d'autre ne joue avec la taille. Enregistrez-vous dans votre devtools quels styles CSS efficaces existent sur l'élément d'image, si l'un d'entre eux sont par exemple min-largeur / min-hauteur / max-largeur / max-hauteur / flex ou gauche / haut / haut / haut / haut / bas
Vous allez ici:
p>
<div class="avatar-big">
<img class="avatar-img rounded-circle" src="https://i.insider.com/5c007f32499ade0d21195b72?width=1100&format=jpeg&auto=webp" />
</div>
<div class="avatar-med">
<img class="avatar-img rounded-circle" src="https://i.insider.com/5c007f32499ade0d21195b72?width=1100&format=jpeg&auto=webp" />
</div>
<div class="avatar-small">
<img class="avatar-img rounded-circle" src="https://i.insider.com/5c007f32499ade0d21195b72?width=1100&format=jpeg&auto=webp" />
</div>