Html 在bootstrap中使用定制css后，img circle类变成椭圆形

我是新手，我必须用bootstrap制作一个圆形的图像。当我为这个图像添加我自己的CSS时，它会变成椭圆形。下面是用于此的html和css

CSS:

HTML:

测试成员1



吉他手兼主唱

喜欢在海滩上散步

1988年以来的成员

测试成员2


吉他手兼主唱

喜欢在海滩上散步

1988年以来的成员

测试成员3


吉他手兼主唱

喜欢在海滩上散步

1988年以来的成员

这些样式：

width: 80%;
height: 80%;

…不要将宽度/高度设置为相对于当前大小。相反，它们设置相对于包含块的宽度/高度。因此，几乎可以保证宽度和高度不匹配

---

您需要使用除%以外的不同尺寸单位。

您好，请检查此解决方案，它可能会对您有所帮助

.人
{
边框：10px实心透明；
高度：200px；
宽度：200px；
填充：10px；
不透明度：0.7；
}
.人：悬停
{
边框颜色：#f1f1；
}

测试成员1




吉他手兼主唱


喜欢在海滩上散步


1988年以来的成员


测试成员2




吉他手兼主唱


喜欢在海滩上散步


1988年以来的成员


测试成员3




吉他手兼主唱


喜欢在海滩上散步


1988年以来的成员

不确定您的问题到底是什么。您已经明确说明了是什么导致了椭圆形-您自己的CSS所以。。。删除它？我也必须使用css。它是基于宽度/高度的百分比。将图像放在一个容器中，容器中有一个溢出：隐藏。然后在容器上设置高度/宽度，而不是图像。您应该能够只指定高度或宽度，并将其设置为“自动”。例如：宽度：80%，高度：自动；我使用的是50x50，但问题是samePerhaps有一个最小/最大宽度/高度样式会影响您。我会使用浏览器开发工具中的DOM/style inspector查看哪些样式应用于图像。谢谢，在从CSS中删除宽度和高度后，问题得到了解决。

<div class="row">
            <div class="col-sm-4">
                <p>
                    <strong>Test Member 1</strong>
                </p>
                <br />
                <a href="#demo" data-toggle="collapse">
                    <img src="images/bandmember.jpg" class="img-circle person" alt="Band Manager" />
                </a>
                <div id="demo" class="collapse">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                </div>
            </div>
            <div class="col-sm-4">
                <p><strong>Test Member 2</strong></p><br />
                <a href="#demo2" data-toggle="collapse">
                    <img src="images/bandmember.jpg" class="img-circle person" alt="Random Name">
                </a>
                <div id="demo2" class="collapse">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                </div>
            </div>
            <div class="col-sm-4">
                <p><strong>Test Member 3</strong></p><br />
                <a href="#demo3" data-toggle="collapse">
                    <img src="images/bandmember.jpg" class="img-circle person" alt="Random Name">
                </a>
                <div id="demo3" class="collapse">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                </div>
            </div>
        </div>

width: 80%;
height: 80%;