Safari 浏览器中的图像变形

Question

我在firefox的litag.my图片中有一个图片，chrome可以，如下所示：

但在 IOS 和 macOS 的 safari 浏览器中它变形了：

这是我的代码：

<div class="colors">
        <ul id="marker" class="d-flex flex-wrap ps-0 mx-3">
        <li class="d-flex justify-content-center me-1 mt-1 me-md-2 mt-md-2 ms-xxl-4" id="marker-118" style="border:1px #FFD600 solid;width: 60px;height: 60px;2.jpg">
         <img loading="lazy" style="cursor: pointer;" onmouseover="changeImage(this);" onmouseleave="changeImageLeave(this);" onclick="changeProduct('1164','118','0','0','FA','3250');changeColor('mm');" src="/1164/thumbnail/size_100/2.jpg">
        </li>
        </ul> </div>

实际上我想在 li 中将图像显示为水平居中，类似于 chrome 和 firefox。（第一张图像顶部照片）

Answer 1

我为图像设置了这个，没问题：

object-fit: contain;

Safari 浏览器中的图像变形

image in safari browser is deformed

css

bootstrap-5