内联CSS上没有课堂噩梦

Question

我希望你们能帮助我一个人，因为我在这个内联CSS噩梦的最后。所以。我想要有两列产品类别，改变实际列的大小并不难，但我有模糊图像的问题。他们比div大，但他们看起来仍然模糊。

检查.prod-img-wrap div显示它包含一个没有类或ID的标记，它有一些内联CSS，我认为它可能是在其他地方生成的。

所有在线解决方案都显示了旧版本的WooCommerce，它们仍然分别为图像大小提供了实际输入，现在在Customize> Woocommerce> Product images面板中，只有可用的裁剪选项。如果我更改检查器中的硬编码值，图像加载正常，所以我知道它已正确上传。

我甚至不知道在这一点上还有什么可以尝试，我已经进行了太长时间，它实际上是我需要排序的最后几个细节之一，以便尽快交付这个网站。我对WordPress也很缺乏经验，所以对于你们中经验丰富的编码员来说，这可能是一个简单或明显的选择。非常感谢任何帮助，非常感谢你的时间。

我需要帮助的页面：http://sellgoldnow.co.uk/

编辑：

我试图用css覆盖这里生成的内联样式：

<div class="prod-img-wrap"><img src="http://sellgoldnow.co.uk/wp-content     /uploads/2018/09/gold-bracelets1-262x108.jpg" alt="Bracelets" sizes="(max-width: 262px) 100vw, 262px" width="262" height=""></div>

使用以下css：

.prod-img-wrap img[style]{
max-width: 705px !important;
width: 705px !important;
height: auto !important;

}

这是我不知道如何“瞄准”的部分，因为我不熟悉这个配方，这是我第一次看到它。

sizes="(max-width: 262px) 100vw, 262px" width="262" height=""

Answer 1

首先，图像是模糊的，因为它们的实际尺寸远小于它们要填充的区域。 [它们只有262px x 108px，它们被拉伸到703 x 277px]所以我想你需要添加更大的图像。

其次，如果你要添加更大的图像并且woocommerce正在裁剪它，请尝试插件“重新生成缩略图”[有百万+下载]并完成这些步骤。

最后，一旦添加了较大的图像并且仍无法正常工作，请尝试更改自定义程序中的缩略图裁剪设置。我会建议1-1或没有人。

如果这有帮助，请告诉我！

编辑：

要定位这些图像，您可以使用此类+代码覆盖它：

ul.products li.product.product-category img,
ul.products li.product img {
    max-width: none!important;
    width: auto!important;
}

这将确保这些图像以其实际尺寸显示。