圆形图像在 Bootstrap 4 中显示为椭圆形

Question

致力于在NodeWeb 应用程序中创建圆形头像图像，当我将图像的Boostrap类设置为：

class="rounded-circle"

它显示为椭圆形，而不是圆形。我在这里看到了类似的问题，其中答案表明原始图像尺寸可能会影响圆圈的形状。下面CSS带有自定义类的原版在创建椭圆形而不是圆形时具有相同的效果：

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

我可以做什么（从 CSS 或 Bootstrap 的角度来看）来确保头像实际上显示为完美的圆形而不是更卵形的形状？先谢谢您的帮助

Answer 1

您应该将其定义为正方形，然后应用边框半径。解决方案如下：

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

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