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

Question

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

class="rounded-circle"

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

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

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

标签： htmlcssbootstrap-4

Answer 1

您应该将其定义为正方形，然后应用边界半径。这是解决方案：

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

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