How to make all product images square?

G

Grizar2019-12-01 23:52:45

WordPress

Grizar, 2019-12-01 23:52:45

There is an online store on wordpress-woocomers-storefront.
Product images have different sizes on the sides, so the list of products is displayed incorrectly.
What are the solutions?
1 - How to crop all images to a square (or add, i.e. make square) on any of the sides?
2 - how to fit the image on the min or max side.?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Rustam Bainazarov, 2019-12-01
@Grizar

It can be done through CSS. The solution has been working since ancient IE11 (because without object-fit). Plus, the pictures will not be subject to unnecessary processing on the server. The code includes all kinds of hacks for different browsers.
It does not depend on the aspect ratio of the image itself, nor on the width of the container (it can be done adaptively without px, as in my example) + browser support, one might say, is maximum + the space for the image does not jump while the image is loading (lazyload will appreciate it):
snippet