使用Woo Commerce更改图像大小

Question

我有一位客户的产品是他拍摄的照片。然后商店（使用Woo Commerce）显示图像的缩略图，当您点击时，您将获得完整尺寸。

问题是后端只有一个缩略图大小设置，水平图像只有一组 - 但有些图像是垂直的。

http://itestwebpageshere.biz/product-category/carribean/

如何独立调整垂直图像。即使您不能发布编码解决方案，也欢迎您的想法。我已经在这方面绞尽脑汁，似乎没有什么比重写Woo Commerce处理图像以获得“垂直”选项的方式更容易了。

Answer 1

所以这就是我的意思：

在CSS中，声明了产品图像的类：

width: 100%;

我把它改为：

max-width: 100%;

修复背后的逻辑：

如果宽度为图像所在的div元素的100％，则水平图像的最大值为（在这种情况下为220px），但垂直图像会拉伸到该宽度。 Woocommerce自动缩放其高度以匹配，从而导致主题中断。如果我们将宽度切换为“自动”，则图像将保持其自然宽度。这会导致主题再次中断，因为现在水平图像没有限制在某个宽度（并且对于页面而言变得太宽）。

通过仅将最大宽度声明为100％，我们做了两件事：我们将水平图像的宽度限制为它们所在的块元素的大小（220px）;我们让CSS自己整理出最小宽度。由于未声明宽度或最小宽度，因此它们将设置为“auto”。

这允许垂直图像处于其自然宽度，但是将水平图像限制在框的宽度，从而保持所有图像缩放，并且我们的布局清晰并排成一行。