На сайте в каталоге товара предполагается наличие изображений товара. Эти изображения очень разные - есть очень узкие, но высокие, есть, наоборот - широкие, но невысокие. Есть совсем квадратные, или с более менее равными пропорциями. Карточки товаров (блоки, внутри которых, помимо прочего, находится и сама эта фотка товара) должны быть одинаковой ширины и высоты. В смысле - у всех соседних блоков одна и та же высота и одна и та же ширина. Сайт, ко всему прочему, еще и полностью responsive, все размеры задаются в vw и %.
Как можно подружить блоки одинаковой ширины и высоты с очень разными пропорциями картинок? Чтобы не было так, что одна картинка выглядит слишком крупной, а другая наоборот? Пробовал экспериментировать с max-width и max-height, просто с шириной, но всё не то. Есть ли какие-то годные методы, а то я начинаю склоняться к динамическому установлению размеров посредством скриптов.
Если он не хочет париться, а хочет волшебство, то нужно ему сказать что волшебства не будет, в лучшем случае можно автоматически ресайзнуть все изображения до единого размера, добавив белые или черные поля для выравнивания пропорций.
То есть самый правильный путь - убедить заказчика, что вы не дизайнер, не фотограф, не художник, и с точки зрения разработки вы можете предложить только вот такое костыльное решение проблемы, и если его не устраивает, он должен организовать фотогафирование и предоставление нормальных стандартизированных изображений. Либо согласиться с костылем, но знать что изображения будут какие будут.
Да, знаю, но это типа требование заказчика - чтобы только теги img) Чет там с точки зрения seo не так с бэкграундами. object-fit - это интересно, не знал, спасибо. Но IE11 должен поддерживаться(
Простой
