Product images in the catalog are not displayed correctly. How to fix?

Question

Images

Product images are not proportional
Have different formats > jpg, png, webp
In the catalog for each product, 2 previews are displayed, before hover and on hover

How to make them appear completely in their box?

Link

Answer 1

.un-product-thumbnail {
position: relative;
padding-top: 100%;
}
.un-product-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

But you need to remove the software hard crop for these pictures, because now they are all created with a size of 300*300, cutting off part of the picture.