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

Question

[Grizar]

Имеется интернет магазин на вордпресс-вукомерс-сторфронт.
Изображения товаров имеют разные размеры по сторонам, поэтому некорректно отображается список товаров.
Какие есть решения.?
1 - Как все изображения массово обрезать до квадрата (или добавить, т.е. сделать квадратными) по любой из сторон?
2 - как изображение вписать по мин или макс стороне.?

Answer 1

[Rustam Bainazarov]

Можно через CSS сделать. Решение работает, начиная с древнего IE11 (т. к. без object-fit). Плюс, картинки не будут подвержены лишней обработке на сервере. Код включает в себя всевозможные хаки для разных браузеров.

Оно не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

Comments

[Mak_Pet]

Пригодилось, спасибо. Но не могли бы вы немного уделить своего времени и рассказать как именно проиходит такая магия?

[Mak_Pet]

Все вроде бы хорошо, но только когда div меньше картинки, если больше, то уже не то.

[Rustam Bainazarov]

Mak_Pet, да, есть такой момент, но я пока не встречал случая, чтобы было нужно для сетки каталога картинки меньше размера блока (1:1).

Супер-универсальный вариант — только на object-fit + полифил для старых браузеров.

Вот этот полифил:
https://github.com/fregante/object-fit-images

[Mak_Pet]

Рустам Байназаров, спасибо.