Изображения растягиваются по высотке на IOS, в чем проблема?

Question

[Indertruster]

Постоянно сталкиваюсь с проблемой того, что на всех устройствах кроме IOS изображения по высотке встают нормально, а на IOS занимают места, чем должны. Визуально они остаются со своими пропорциями, но образуется непонятный отступ.
Самое банальное решение в media задаваться max-height, но на мой взгляд это костыльное решение и я уверен есть способы решить данную проблему, только не могу понять как...
modno.uniqcode.ru/model.html
Вот пример верстки, на всех устройствах изображения сохраняют свои пропорции без ненужных отступов, но IOS выдает следующую картину:

Как с этим бороться?

Answer 1

[Rustam Bainazarov]

/* Либо вообще удалить flex у этого блока */ 
.s_publications .row a {
    display: flex; /* я про это */
}

/* Либо, если всё же нужен flex, задать выравнивание контента */ 
.s_publications .row a {
    display: flex; 
    align-items: flex-start; /* например, такое */
}

И будет работать:


Кроме того, такой глобальный стиль делать исключительно не рекомендуется:

img {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   max-width: 100%;
   max-height: 100%;
   -o-object-fit: contain;
    object-fit: contain;
    /* да и к тому же не совсем ясен смысл этого правила в целом */
}

Типичный максимум глобального стиля img:

img {
    height: auto;
    vertical-align: middle; /* или baseline, если подавляющее кол-во использований будет для вёрстки текстовых блоков */
    /* можно ещё вот это добавить, но это обычно уже в рамках любого CSS Reset для img идёт:
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit; */
}

Answer 2

[Тимофей]

Есть такая единица измерения как vh , wigth:100%; height:100vh; для блока