Css 将滑块中的图像垂直对齐到中间

链接：

该网站由elementor和woocommerce在wordpress上建立，并使用插件“Twist”以幻灯片形式显示woocommerce画廊的图片

使用此css，幻灯片的高度降低到400px

.twist pgs{ 高度：400px }

由于底部隐藏的高度较短，因此图像与顶部垂直对齐。我正在寻找一种方法来显示图像，使它们垂直对齐到中间，使顶部和底部的一部分隐藏在滑块中

我找不到任何css可以做到这一点。感谢您在这方面给予的帮助。插件的所有者也不知道。

请尝试此操作

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

---

这应该可以解决问题。请务必让我知道它是否有效。

您的图像由以下javascript对齐：

它会将转换动态添加到源代码中：

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

如果你换一个，也许会有用。它添加了“slick vertical”类。 如果这不起作用，也许你能找到另一个选择

---

问候汤姆

谢谢你的回答。是的，它工作了，但是压缩了图像，没有保持其比例：使用此代码并添加：object fit:cover固定；谢谢Godswill Mesh是的，我想建议您将其包括在内，但我担心您是否会对裁剪感到满意，因为它会删除图像的某些部分。小心使用

.slick list{transform:translateY（-50%）；}

如果所有图像高度相同

vertical: false,