如何使我的圆圈图像看起来像手机中的圆圈？答案

【问题标题】：How can I make my circle image look like a circle in mobile?如何使我的圆圈图像看起来像手机中的圆圈？
【发布时间】：2021-10-20 10:30:15
【问题描述】：

我的网站中有圆形图像，因为我使用的是 Bootstrap 4，所以我使用的是 rounded-circle 类。这在桌面上运行良好，但在移动设备中，圆圈变成了椭圆形。（代码笔here）

桌面看起来不错：

手机看起来像一个椭圆形（iPhone XR）：

我的代码：

<div class="nh-service-card-image-wrapper">
    <img src="images/guitar.jpg" alt="Reebit" class="img-fluid rounded-circle" 
    width="85" height="85">
</div>


 .nh-service-card-image-wrapper {
    aspect-ratio: 1;
 }

 .nh-service-card-img img {
     object-fit: cover;  
     width: 90% !important;
     height: 90% !important;
     margin-top: 1.2em;
 }

注意：由于我使用的技术，您在我的img 标签中看到的width="85" 和height="85" 是必需的。

【问题讨论】：

我认为这是由于 img-fluid 类使图像响应。如果您想要所有屏幕的固定图像尺寸，那么您可以删除此类。
IOS 上的 Safari 似乎还没有实现宽高比。
我现在正在使用 Chrome，即使我删除了 img-fluid 类，它仍然显示为椭圆形。

标签： html css image bootstrap-4

【解决方案1】：

问题在于 img-fluid 类。这会将图像的高度重置为自动，宽度设置为 100%。

尝试删除该类然后它应该可以工作。

附加：您正在使用margin-top: 1.2rem，除非您将图像设为inline-block 或block，否则它将无法正常工作；

【讨论】：

好的，所以我删除了 img-fluid 类，但它仍然呈现为椭圆形。
尝试删除 90% 的宽度和高度

【解决方案2】：

您可以通过硬编码来做到这一点，因为您可以看到您的图像在宽度侧是椭圆的，因此您必须减少 width 或只增加 height 直到达到您想要的移动设备形式

【讨论】：