Кросс-браузерная проблема высоты изображения с flexbox в сетке CSS - PullRequest
0 голосов
/ 16 мая 2019

У меня установлен контейнер для переноса: сетка, которая содержит два столбца.Один столбец содержит отзывчивое изображение, другой содержит текст.Столбец изображения настроен на отображение: flex, чтобы изображение заполняло всю высоту столбца, как определено элементом сетки рядом с ним.

Это прекрасно работает в Firefox:

enter image description here

Но в Chrome изображение отображается в полный рост, а не как отзывчивое:

enter image description here

Если яизмените отображение на -webkit-box, Chrome ведет себя как нужно ...

enter image description here

... но не должен работать должным образом при использовании дисплея: flex?

Ссылка: http://uvmc.wpengine.com/play-sing-learn/classes

Я пробовал все виды комбинаций ширины, минимальной ширины, высоты, минимальной высоты изображения, но, похоже, ничего не работает.Я знаю, что могу справиться с этим, используя фоновое изображение, но мне бы очень хотелось использовать реальное изображение.Есть идеи?

1 Ответ

0 голосов
/ 16 мая 2019

В этом коде много чего происходит.

Важно отметить, что процентная высота ненадежна во всех браузерах, если родительские элементы не имеют определенной высоты (см. Ссылки ниже).

Тем не менее, в данном конкретном случае добавление height: 100% к элементу img (.class-main-img), по-видимому, решает проблему.

Дополнительная информация:

...