Как вы решаете проблемы с размерами изображений?

На сайте в каталоге товара предполагается наличие изображений товара. Эти изображения очень разные - есть очень узкие, но высокие, есть, наоборот - широкие, но невысокие. Есть совсем квадратные, или с более менее равными пропорциями. Карточки товаров (блоки, внутри которых, помимо прочего, находится и сама эта фотка товара) должны быть одинаковой ширины и высоты. В смысле - у всех соседних блоков одна и та же высота и одна и та же ширина. Сайт, ко всему прочему, еще и полностью responsive, все размеры задаются в vw и %.
Как можно подружить блоки одинаковой ширины и высоты с очень разными пропорциями картинок? Чтобы не было так, что одна картинка выглядит слишком крупной, а другая наоборот? Пробовал экспериментировать с max-width и max-height, просто с шириной, но всё не то. Есть ли какие-то годные методы, а то я начинаю склоняться к динамическому установлению размеров посредством скриптов.
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 3
Posho
@Posho
Frontend-developer
object-fit, но он в IE не работает.

старый проверенный способ — класть картинки бэкграундом в блок и поставить background-size: cover;
Ответ написан
@be_a_man
Ответ написан
Комментировать
@Narts
Прописать img с картинкой (по требованию заказчика), и присвоить ему display:none.
Далее в див background image и background size: cover
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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