WooCommerce 产品图片甚至没有

Question

我有一家 WooCommerce 商店，在查看所有产品/类别时，图像大小会导致所有内容都不均匀。

我使用了硬裁剪和重新生成的缩略图，这可以使其均匀，但它会刮掉图像的左右边缘。 （我的大多数图像都是风景，所以这不是有利的。）

是否可以设置图像占位符大小，然后允许图像“适合”空间而不裁剪初始图像？所以我的风景图片在其上方和下方添加了“空白”以使其成为正方形？

Answer 1

最简单的方法是删除硬裁剪选项，然后在设置中设置允许的最大尺寸。剩下的你可以用 HTML 和 CSS 来做这样的事情：

.thumbnail_container {
    text-align: center;
    height: 100px;
    overflow: hidden;
}
.thumbnail_container img {
    display: block;
    max-height: 100px;
    width: auto;
}

如果图像太窄而无法容纳thumbnail_container 框，这将使图像居中，从而添加您需要的空白。如果您想要图像上的边框或其他样式，您应该将这些样式应用于thumbnail_container 类而不是图像本身。 100px 的高度当然应该更改为您想要在图像上的（最大）高度。如果您还需要将图像垂直居中，则需要添加更多标记（HTML）和 CSS。