искаженные изображения на iphone

Question

Работая на сайте и протестировав его на Android, но обнаружив, что есть проблема с искажением изображения на iPhone: https://www.prestigemountainchalets.com/wellness

Вот как изображение устанавливается в шаблоне

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

Я использую Bootstrap 4, так что это CSS, нацеленный на это изображение

.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%;
}

Я не использовал никаких пользовательских CSS для этого изображения, поэтому он использует только перечисленные стили Bootstrap.

Вот как это выглядит на Android

против того, как это выглядит на iPhone

Завершено некоторое исследование, и наиболее близким и наиболее вероятным решением, по-видимому, является то, что flex не очень хорошо поддерживается на iPhone, но это не то, что я вижу из canIuse: https://caniuse.com/#feat=flexbox

Они используютпоследняя версия chrome 78, так что если нет, то, похоже, больше зависит от использования bootstrap 3. Что вы думаете?