Глядя для вертикального выравнивания изображений в ползунке по центру

Question

Ссылка: http://mallorca -attraction-tickets.com / product / test-2 /

Сайт построен на WordPress с Elementor и WooCommerce и использует плагин "Твист"для отображения изображений галереи woocommerce в слайд-шоу.

Высота слайдов была уменьшена до 400 пикселей с помощью этой css

.twist-pgs {height: 400px}

Изображения выровнены по вертикали сверху, из-за небольшой высоты низ скрыт. Я ищу способ отображения изображений, чтобы они были выровнены по вертикали к центру, чтобы часть верха и низа была скрыта в ползунке.

Я не могу найти никакой CSS, который может это сделать. Спасибо за любую помощь, полученную с этим. Владелец плагина тоже не знает.

Answer 1

Ваше изображение выровнено по этому javascript:

http://mallorca -attraction-tickets.com / wp-content / plugins / twist / assets / slick.min.js? Ver = 1,3

Он динамически добавляет преобразование в ваш исходный код:

<div class="slick-track" style="opacity: 1; width: 7980px; transform: translate3d(-3420px, 0px, 0px);">

0px, 0px для верха и низа. Вы можете попытаться установить для них ширину изображения / 2.

Но сначала сделайте резервную копию файла javascript.

И в файле javascript есть опция:

vertical: false,

Возможно, это сработает, если вы измените эту. Добавляет класс "пятно-пятно". Если это не работает, возможно, вы найдете другой вариант.

С уважением, Том

Answer 2

Пожалуйста, попробуйте это

.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 400px;
    background-size: cover;
    background-position: center;
    box-shadow: none;
}

Это должно решить проблему. Дайте мне знать, если это работает.