如何将网页椭圆形图标改为圆形？代码调整方案咨询

你的图标显示为椭圆形，核心原因是原图不是正方形——仅设置border-radius: 50%只会把矩形图片切成椭圆，必须先让图片的显示区域变成正方形，再添加圆角。

解决方案1：直接修改img标签样式 #

给img同时设置相等的宽高，再用object-fit: cover保证图片比例不变、填充整个正方形区域：

<span>
    <a href="/futbol" rel="noopener"><img style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;" src="/wp-content/uploads/2022/04/MX-flag.webp" alt="Mexico Flag Translation"></a>
</span> <span style="color:white">SP</span> <span style="color:white">|</span>
<span>
    <a href="/" rel="noopener"><img style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;" src="/wp-content/uploads/2022/04/US-flag.jpeg" alt="English Flag Translation"></a>
</span> <span style="color:white">EN</span>

解决方案2：用容器包裹控制（更易维护） #

给图片外层加一个正方形容器，设置圆角并隐藏溢出部分，图片自适应容器大小：

<span style="display: inline-block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;">
    <a href="/futbol" rel="noopener"><img style="width: 100%; height: 100%; object-fit: cover;" src="/wp-content/uploads/2022/04/MX-flag.webp" alt="Mexico Flag Translation"></a>
</span> <span style="color:white">SP</span> <span style="color:white">|</span>
<span style="display: inline-block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;">
    <a href="/" rel="noopener"><img style="width: 100%; height: 100%; object-fit: cover;" src="/wp-content/uploads/2022/04/US-flag.jpeg" alt="English Flag Translation"></a>
</span> <span style="color:white">EN</span>

关键说明 #

• object-fit: cover：让图片按原始比例填充容器，自动裁剪超出部分，避免图片拉伸变形
• 必须保证宽高数值一致，这样border-radius: 50%才能生成正圆形

内容的提问来源于stack exchange，提问作者José Murrieta