圆形图像在引导程序 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>

Answer 2

您必须确定图像的大小并放置object fit: cover以避免将图像拉伸为正方形

.object-fit-cover {
width:50px;
height:50px;
object-fit:cover
}
<img class='rounded-circle object-fit-cover' />