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

Question

正在Node Web App中创建圆形头像图像，并将图像的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>