Изображения товаров в каталоге отображаются не правильно. Как исправить?

Question

[greenorangeblue]

Изображения товаров не пропорциональны
Имеют разный формат > jpg, png, webp
В каталоге для каждого товара отображается 2 превью, до наведения и при наведении

Как сделать так, чтобы они отображались полностью в своем боксе?

Ссылка на сайт

Answer 1

[lexchz]

.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;
}

Но тебе нужно убрать программный hard crop для этих картинок, т.к они сейчас все создаются размером 300*300, обрезая часть картинки.

Comments

[greenorangeblue]

Получается вот что, с отключением кропа

[lexchz]

Нужно в стилях вот сюда

.woocommerce ul.products li.product a img {
margin: 0;
}

добавить

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;

и вот это убрать вообще:

.woocommerce ul.products li.product .un-loop-thumbnail {
    position: relative;
    display: block;
}