У меня проблемы с каталогом изображений на моем WordPress сайте.
Все изображения имеют разное соотношение сторон, некоторые 1: 1, другие 1: 2. WooCommerce позволяет только определять ширину миниатюр, в результате чего некоторые изображения в два раза выше, чем другие.
Скриншот
Я пытался это исправить, используя найденный код:
.woocommerce ul.products li.product a .et_shop_image img {
width: auto;
margin: 0 auto !important;
display: block;
max-width: 180px;
max-height: 180px;
}
Это исправляет проблему с высотой, и выглядит хорошо на больших дисплеях. Но на меньших экранах изображения сжимаются вместе и накладываются друг на друга.
У кого-нибудь были такие же проблемы? Какой лучший способ исправить это? Мне нужны квадратные миниатюры с встроенным изображением (например, используя background-size: Содержать).
Благодарю за помощь, которую я могу получить здесь.
Приветствия.