如何在 Woocommerce 单个产品页面图像滑块中将不同尺寸的图像适合“框”

Question

我偶然发现了 WooCommerce 单一产品页面图像尺寸的一个问题。 产品图片大小不一，这就是其中一些裁剪的原因。

我添加了这个 css 试图解决这个问题：

.woocommerce.single-product #content div.product div.images, .woocommerce.single-product div.product div.images, .woocommerce-page.single-product #content div.product div.images, .woocommerce-page.single-product div.product div.images {
    min-height: 500px;
    min-width: 650px;
    max-height: 500px;
    max-width: 650px;
    }

 div.woocommerce-product-gallery__image.flex-active-slide{
height: 400px;
object-fit: cover;
}

它将照片滑块和活动照片的位置和大小放在我想要的位置，但是当我浏览照片时，一些照片被裁剪了。我需要所有照片都适合高度（400 像素）。宽度应自动设置，以便图像在 400 像素高度处完全可见。也许有人知道该怎么做？

使用 WordPress + Elementor + Shoptimizer 主题

单品页链接：https://bonideco.com/product/lawa-design-modernus-laikrodis-delta-azuolo-spalvos-su-juodomis-rodyklemis/

非常感谢！

Answer 1

经过几个小时的研究，我终于找到了满足我需要的代码。

.woocommerce div.product div.images a img {
height: 400px;
object-fit: contain;
object-position: top;
}

Answer 2

不是答案，但无法发表评论 - 感谢分享！