Bootstrap4的rounded-circle圆形图片在移动端变椭圆该如何解决？

问题根因 #

1. CSS选择器匹配错误：你定义的图片样式选择器为.nh-service-card-img img，但实际外层容器的类名是nh-service-card-image-wrapper，导致你写的object-fit: cover等规则完全没有生效。
2. Bootstrap 4自带的.img-fluid类默认设置了height: auto，会覆盖你img标签上声明的height="85"属性，移动端父容器宽度变化时，图片高度会随宽度自适应，若图片本身不是正方形，border-radius: 50%就会渲染为椭圆。

修复方案 #

直接替换你的原有CSS为以下内容即可，无需修改HTML结构，也不会删除你要求保留的width/height属性：

.nh-service-card-image-wrapper {
    aspect-ratio: 1;
    /* 用flex居中替代margin-top更适配多端，不需要可以删除 */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 修正选择器，匹配容器内的图片 */
.nh-service-card-image-wrapper img {
    object-fit: cover;
    /* 强制图片保持正方形，覆盖.img-fluid的height:auto规则 */
    aspect-ratio: 1;
    width: 90% !important;
    height: 90% !important;
    /* 要保留原有margin规则也可替换掉flex居中逻辑 */
    /* margin-top: 1.2em; */
}

如果仍有iOS端适配问题，可给img额外加一行flex-shrink: 0避免弹性布局下被强制压缩。

内容的提问来源于stack exchange，提问作者Paula