In design, no boom-boom, how to optimally display pictures in an online store?

Question

Design

Why I ask - in the design, no boom-boom ...
As you can see in the screenshot, the pictures can be:

• square
  
• rectangular vertical
  
• rectangular horizontal
  

How to display pictures without empty spaces below them?
I tend to the universal format - a square.
Images are displayed with the img tag, it is not suitable to display them as a square through the background-cover property /

if you gave the answer, keep the surprise:

Answer 1

Surprise with a cat is good.
But you also have a surprise: pictures for an online store need to be prepared.
img can also be automatically cropped to a square, this is not a problem. The problem is different, that the head can be cut off, automatically.