Как сделать так, чтобы изображения были отзывчивыми и одинаковой высоты?

Question

Я хочу убедиться, что изображения на моем сайте отзывчивы и остаются на прежнем уровне при уменьшении размера окна. У меня есть медиа-запрос, который изменил макет на 1 столбец вместо двух на меньших экранах, но на больших экранах высота изображения не одинакова. Я поместил все изображения в div и ограничил размер этих div, но ничто из того, что я делаю, похоже, не изменяет высоты изображений, чтобы они оставались отзывчивыми. Я пытался использовать Object-Fit и Flexbox, но, похоже, ничего не работает.

Сайт находится здесь: https://giagnus64.github.io/mineight-site/

Answer 1

Вы можете сделать это, используя существующие изображения, если вы изменили свой HTML и использовали фоновые изображения вместо встроенных изображений.

Однако более простым решением было бы просто сделать все ваши изображения одинакового размера. Большинство из них имеют ширину 690px и высоту 460px, поэтому, если вы измените размеры и обрежете те, которые доставляют вам трудности, до 690px x 460px, все будет хорошо.

Вместо изменения размера вы также можете обрезать изображения до эквивалентного соотношения сторон 690:460. Это будет работать при условии, что изображения все еще достаточно широки, чтобы охватить ваш div.feature-box в каждом окне просмотра.

Удачи!