WooCommerce产品图像不均匀

Question

我有一个WooCommerce商店，在查看所有产品/类别时，图像尺寸会导致一切都不均匀。

我已经使用了硬裁剪并重新生成缩略图，这些缩略图可以实现均匀的效果，但它可以消除图像的左右边缘。 （我的大多数图像都是风景，所以这不太有利。）

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

Answer 1

最简单的方法是删除硬裁剪选项，然后在设置中设置允许的最大尺寸。其余的你可以用HTML＆amp; 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。