Bootstrap 5 img-fluid在Safari中失效：圆形图片显示为椭圆

• CSS缩放的宽高比计算逻辑差异：Safari与Chrome等浏览器在处理transform: scale()、百分比宽高时的基准计算规则不同。若图标容器未明确锁定宽高比，仅靠相对单位布局，Safari会按照自身引擎规则拉伸元素，破坏圆形比例。
• aspect-ratio属性兼容性问题：旧版本Safari对CSS aspect-ratio属性的支持存在偏差，若用该属性维持正方形容器，可能因浏览器未正确识别或继承属性，导致宽高比失效。
• object-fit属性未正确生效：若图标图片设置了object-fit: cover/contain，但容器的宽高约束在Safari中未正常作用（比如容器宽高为动态计算值），图片无法保持原始正方形比例，进而让圆形图标变椭圆。
• Safari缩放渲染bug：当元素同时应用border-radius: 50%和缩放变换时，Safari的渲染引擎可能出现比例计算bug，宽高缩放比例不一致，最终显示为椭圆。
• Viewport配置问题：页面viewport meta标签缺少width=device-width或initial-scale=1等关键设置时，Safari在移动端/桌面端的缩放计算会出现偏差，影响元素宽高比的正确渲染。

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