Изменение внешнего вида галереи продуктов WooCommerce ⇐ CSS

[Anonymous]

Я пытаюсь изменить отображение элемента «Продукты» из Woocommerce, используя CSS и JavaScript. Карусель для меняющихся фотографий работает нормально. Тем не менее, у меня есть проблема с отображаемой фотографией, я бы хотел, чтобы она отображала всю фотографию в квадратном контейнере справа, независимо от размеров фотографии, она подходит для этого квадрата. Однако, если фотография меньше, она будет сосредоточиться на этом контейнере. Однако, независимо от того, что я делаю, что -то сбоятся или, например, функция Zoom перестает работать.
скриншот о том, как вырезаны фотографии:

И это пользовательский код в Javascript: < /p>

jQuery(document).ready(function($) {
$(window).on('load', function() {
var $gallery = $('.woocommerce-product-gallery');
var $thumbs = $gallery.find('ol.flex-control-nav');
$thumbs.wrap('');
var $thumbsWrapper = $('.flex-control-thumbs-wrapper');
$thumbsWrapper.prepend('▲');
$thumbsWrapper.append('▼');
var $upButton = $('.thumb-nav-up');
var $downButton = $('.thumb-nav-down');

$upButton.on('click', function() {
var scrollAmount = $thumbs.height() * 0.3;
$thumbs.animate({
scrollTop: $thumbs.scrollTop() - scrollAmount
}, 300);
});

$downButton.on('click', function() {
var scrollAmount = $thumbs.height() * 0.3;
$thumbs.animate({
scrollTop: $thumbs.scrollTop() + scrollAmount
}, 300);
});

function checkArrowsVisibility() {
var thumbsHeight = $thumbs[0].scrollHeight;
var visibleHeight = $thumbs.height();
if (thumbsHeight

Подробнее здесь: https://stackoverflow.com/questions/794 ... ct-gallery