Chrome растягивает изображения сайтов, Edge, IE, Firefox нет

Question

Мне трудно понять, почему изображения на главной странице https://www.kerkradio.za/index.php выглядят растянутыми.Я не болею за CSS или около того, но в IE, FF и Edge они все хорошо показывают изображения.Я нашел здесь одну ссылку на решение ( Chrome растягивает мои изображения по вертикали, однако в Firefox / Edge все работает нормально), но это не помогло.

Я посмотрелв тех случаях, когда для высоты и ширины изображения установлено значение «Авто», а вместо этого установлено значение 100%.Неудачно.Я уверен, что что-то упустил в css-es.

Пожалуйста, обратитесь к коду https://www.kerkradio.co.za/index.php. Прокрутите вниз, где отображаются все изображения церковных карт.

Iбыли здесь более 3 часов.

Answer 1

Я думаю, вам нужно убрать высоту с этих селекторов:

.card-img img

Похоже на другое поведение flexbox и размер вычислений изображения. Итак, img содержит:

width: 100%;
height: 100%;

Chrome увеличивает изображение до 100% высоты оригинала, в то время как изображение Firefox изменяет размер до 100% высоты контейнера