Изображение круга выглядит как овал в Bootstrap 4

Question

Работаю над созданием круглых изображений аватаров в Node веб-приложении, и когда я устанавливаю класс Boostrap изображения на:

class="rounded-circle"

, он выглядит как овал, а не круг. Я встречал здесь похожие вопросы, ответы на которые указали, что исходные размеры изображений могут влиять на форму круга. Приведенная ниже ваниль CSS с настраиваемым классом имела тот же эффект при создании овала вместо круга:

.player-circle {
border-radius: 50%;
} 

Что я могу сделать ( с точки зрения CSS или Bootstrap ), чтобы аватар действительно отображался в виде идеального круга, а не овальной формы? Заранее спасибо за помощь

Answer 1

Вы должны определить его как квадрат, а затем применить border-radius. Вот решение:

.rounded-circle{
border:1px solid;
border-radius:50%;
width:50px;
height:50px;
}

<div class="rounded-circle"></div>