Question

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

身高：300px; 宽度：自动; position：absolute;

但这不起作用。

以下是包含问题的页面的链接：

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

请帮忙。谢谢！

Answer 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;也可以完美运行。

Answer 2

您可以通过

引用它们

.product-images img {
   // css here
}

似乎没有名为product-image的课程，因此这会引用a标记中的任何图片product-images。

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

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

如果想要进行整齐对齐，您可能最好在.product-images标签上设置高度并使图像垂直对齐。

（另外，制作相同尺寸的最简单方法可能是编辑图像并上传相同尺寸）

Answer 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维度。

希望这有帮助