What are the best practices for image layout in a product card?

Question

css

I'm working on a woocommerce theme, in the future I'm thinking about selling the theme.

The question arose of how to better implement a product card, namely the image in it.

Either make a div with a background as a product image, or make it an img image.

How to set the dimensions of the image so that the grid does not jump?
Or let's make a square image, and users will crop the photo in Photoshop on their own. (probably difficult)

Need advice on how to implement this in terms of convenience and to look good.

Answer 1

Use the picture element to insert pre-prepared images for different screens. There is also a wonderful property css object-fit: cover, both options are easy to google with examples of use.