如何将不同尺寸的图像适合“框”在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;
}

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

使用WordPress + Elementor + ShopTimizer主题

链接到单个产品页面： https://benideco.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

输入自定义CSS：

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