Css iphone上的图像失真

在一个网站上工作并在android上进行了测试，但发现iPhone上存在图像失真问题：

这是在模板上设置图像的方式

<img alt="" class="img-fluid col-12 col-sm-6 col-md-4 mb-1" src="/media/ckeditor/2019/10/29/download_11.jpeg">

我没有在这个图像上使用任何自定义css，所以它只使用列出的引导样式

这就是它在android上的外观

vs它在iPhone上的外观

做了一些研究，最接近、也是最有可能的解决方案似乎是flex在iPhone上没有得到很好的支持，但这不是我从canIuse中看到的：

---

他们使用的是最新版本的Chrome78，所以如果不是的话，选择似乎更多地取决于使用Bootstrap3。你觉得怎么样

旋转木马中的图像具有内联高度元素（可能是通过js添加的），您必须删除该元素。不要对图像使用col-class，因为它是用于容器的。请记住，如果img是flexbox子项，则它通过dafault align项：stretch@Sfili_81这会影响CAURESEL下方的图像，而不是CAURESEL。在您的链接中，我只会在旋转木马中看到问题。您尚未将“对齐项目”属性添加到包含这些图像的

.row.text center

。尝试添加一个类似于，

.row.text-center{align items:center；}

，并确保自动为代码添加前缀，以便与所有浏览器兼容

.mb-1, .my-1 {
    margin-bottom: 0.25rem !important;
}
@media (min-width: 768px)
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (min-width: 576px)
.col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}