使用 Woocommerce 更改图像大小

Posted 2023-03-25

【中文标题】使用 Woocommerce 更改图像大小

【英文标题】：Changing Image Sizes with Woo Commerce

【发布时间】：2012-08-04 20:46:28

【问题描述】：

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

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

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

如何独立调整垂直图像。即使您无法发布编码的解决方案，也欢迎提出想法。我已经为此绞尽脑汁了一段时间，似乎没有比重写 Woo Commerce 处理图像的方式更容易的方法了。

【参考方案1】：

这就是我的想法：

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

width: 100%;

我改成：

max-width: 100%;

修复背后的逻辑：

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

通过仅将最大宽度声明为 100%，我们做了两件事：我们将水平图像的宽度限制为它们所在的块元素的大小（220 像素）；我们让 CSS 自己整理 min-width。因为没有声明宽度或最小宽度，它们将被设置为“自动”。

这允许垂直图像位于其自然宽度，但将水平图像限制在框的宽度上，从而保持所有图像缩放并且我们的布局干净整齐。