在移动 Safari 上调整图像大小的问题

Question

我有这个页面https://apoerin.github.io/crepes-burgers/

如您所见，所有图像都经过了很好的圆角处理。但在移动版 Safari 上，关于部分的图像显示如下

我在 img-container

上有这个

    .details .img-wrapper {
    height: auto;
    }

而这个 image 本身

.preview{
    width: 350px;
    border-radius: 50%;
    border: 2px solid #8281815e;
    margin: 20px auto;
    -webkit-box-shadow: 1px 5px 22px -4px #000000;
    box-shadow: 1px 5px 22px -4px #000000;
}

我尝试将 width:350px 设置为 img-container，并将 width:100% 设置为 image，但它会导致 Chrome 中桌面模式的宽度变化（仅适用于3) 的 2 张图片

Answer 1

使 .preview 固定高度使其成为正方形：

添加：

.preview {
   width: 350px;
   height: 350px;
   object-fit: cover;
}

在移动 Safari 上调整图像大小的问题

Issue with image resizing on mobile Safari

css

safari