@Indertruster

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

Постоянно сталкиваюсь с проблемой того, что на всех устройствах кроме IOS изображения по высотке встают нормально, а на IOS занимают места, чем должны. Визуально они остаются со своими пропорциями, но образуется непонятный отступ.
Самое банальное решение в media задаваться max-height, но на мой взгляд это костыльное решение и я уверен есть способы решить данную проблему, только не могу понять как...
modno.uniqcode.ru/model.html
Вот пример верстки, на всех устройствах изображения сохраняют свои пропорции без ненужных отступов, но IOS выдает следующую картину:
5feb9a9c87635784533212.jpeg
Как с этим бороться?
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
/* Либо вообще удалить flex у этого блока */ 
.s_publications .row a {
    display: flex; /* я про это */
}

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

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

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

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; */
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
timofeygusevopal
@timofeygusevopal
Учусь
Есть такая единица измерения как vh , wigth:100%; height:100vh; для блока
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы