css 如何在Woocommerce单个产品页面图像滑块中将不同大小的图像放入“框”中

xuo3flqw 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(112)

我偶然发现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 px）。宽度应该自动设置，使图像是完全可见的400 px高度。也许有人知道如何做到这一点？
使用WordPress + Elementor + Shoptimizer主题
链接到单个产品页面：https://bonideco.com/product/lawa-design-modernus-laikrodis-delta-azuolo-spalvos-su-juodomis-rodyklemis/
多谢了！

css

来源：https://stackoverflow.com/questions/72897718/how-to-fit-different-size-images-to-box-in-woocommerce-single-product-page-ima

1条答案

按热度按时间

xzabzqsa1#

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

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

赞(0）回复(0）举报 2022-11-26

我来回答

css 如何在Woocommerce单个产品页面图像滑块中将不同大小的图像放入“框”中

1条答案

相关问题

热门标签

最新问答