Html 引导4中显示为椭圆形的圆形图像

在

节点

Web应用程序中创建圆形化身图像，当我将图像的

Boostrap

类设置为：

class="rounded-circle"

它显示为椭圆形，而不是圆形。我在这里看到过类似的问题，答案表明原始图像的维度可能会影响圆的形状。下面带有自定义类的香草

CSS

在创建椭圆形而不是圆形时具有相同的效果：

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

---

我能做些什么（从CSS或引导的角度来看，）来确保化身实际上显示为一个完美的圆形，而不是一个更像胚珠的形状？提前感谢您的帮助

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

。圆形{
边框：1px实心；
边界半径：50%；
宽度：50px；
高度：50px；
}

---

太棒了，这正是我需要的。我很欣赏这种变通方法！谢谢。我总是很乐意帮忙：）但是这个解决方案对图像效果不太好，因为它会先拉伸图像，然后设置相同的宽度和高度，然后应用边界半径属性。