图像大小的 CCS 问题 - Woocommerce 商店答案

【问题标题】：CCS Issue for Image Sizing - Woocommerce Store图像大小的 CCS 问题 - Woocommerce 商店
【发布时间】：2014-07-15 07:13:34
【问题描述】：

我正在尝试使所有产品图片的高度相同。我觉得我应该能够将以下内容添加到“.product-image”：

高度：300px；宽度：自动；位置：绝对；

但这在这里不起作用。

这里是问题页面的链接：

如何使这些图像大小相同？再一次，我认为它们应该由 .product-images 管理，但似乎唯一有效的是当我将更通用的“img”更改为 media=All 时，这会弄乱网站上的其他图像。

请帮忙。谢谢！

【问题讨论】：

【解决方案1】：

删除代码中的height:auto;，如果你想要一个特定的height，然后使用height:50px;或任何你想要的。

img{
    border-style:none;
    vertical-align:top; 
    max-width:100%;
    height:auto; // <--- Remove that
}

picresize 等在线工具对您的情况有很大帮助 http://www.picresize.com/。您可以调整图像大小，因此即使使用 height:auto; 也能完美运行。

【讨论】：

【解决方案2】：

您可以通过以下方式引用它们

.product-images img {
   // css here
}

似乎没有名为 product-image 的类，因此它引用了 a 标记中的任何图像，类为 product-images。

但是，当所有图像尺寸不同且外部标签具有最大宽度时增加高度可能会导致某些图像被拉伸并看起来很奇怪。

拉伸小图像也会使它们变得非常块状。

如果这个想法是为了整齐对齐，您可能最好在 .product-images 标签上设置一个高度，并使图像在其中垂直对齐。

（另外，使它们大小相同的最简单方法可能是编辑图像并上传相同大小）

【讨论】：

【解决方案3】：

产品图像类位于图像周围的链接上。图片本身有两个类：attachment-shop_catalog 和 wp-post-image。所以，你可以试试这样：

.attachment-shop_catalog .wp-post-image {
    height:300px;
}

另一个问题是 img 具有在 html 中指定的宽度和高度。

为确保图像正确缩放，您应该将宽度设置为自动。试试这样的：

.attachment-shop_catalog .wp-post-image {
    height:300px !important;
    width:auto !important;
}

我添加了 !important 以便它覆盖硬编码的 html 尺寸。

希望对你有帮助

【讨论】：

由于某种原因将 CSS 应用于 .attachment-shop_catalog .wp-post-image .product-images 不起作用...还有其他建议吗？