Блог

Главная - Вопросы по программированию - Safari автоматически игнорирует высоту в img на мобильных устройствах

Safari автоматически игнорирует высоту в img на мобильных устройствах

#javascript #html #css #safari

#javascript #HTML #css #safari

Вопрос:

У меня есть веб-сайт, разработанный с использованием HTML, CSS (Bootstrap), JS и PHP. Проблема возникла с изображениями в Safari. В моем теге img есть класс img-fluid, который имеет это в своем CSS:

 max-width: 100%;
height: auto;

Все работает нормально на всех устройствах, кроме Safari.

Вот как это выглядит в Safari:

введите описание изображения здесь

И вот как это должно выглядеть:

введите описание изображения здесь

Это происходит со всеми изображениями в Интернете.

У меня есть этот мета-тег:

     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Я думаю, проблема в том, что Safari игнорирует height: auto; , и все изображения сжимаются до 100% высоты контейнера или что-то в этом роде.

Комментарии:

1. вы пробовали использовать фиксированное width: 100% и max-width: /*as container*/ ?

2. Вы очищали кеш перед обновлением?

3. @ProblemChild да, я сделал и ничего, тот же результат. И у меня отключен кеш.

4. у которых display есть ваша meta превосходная метка?

5. @ProblemChild Если вы спрашиваете о display родительском узле, у меня есть display: flex и дерево HTML — div (контейнер с display: flex ) -> div (контейнер-изображение с display: flex ) -> div (контейнер-текст)

Ответ №1:

Проблема была с display родительским контейнером. Я меняю de display: flex на display: block в родительском div ( div который содержит img тег), и изображения начинают работать нормально.

Спасибо проблемному ребенку за то, что подсказал мне правильный путь 🙂