时间戳

首页 > 解决方案 > 没有类噩梦的内联 CSS

css - 没有类噩梦的内联 CSS

问题描述

我希望你们能帮我解决这个问题，因为这段内联 CSS 噩梦让我束手无策。所以。我想要两列产品类别，更改实际列的大小并不难，但我遇到了图像模糊的问题。它们比 div 大得多，但看起来仍然模糊。

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

所有在线解决方案都显示了较旧版本的 WooCommerce，该版本仍然单独输入图像尺寸的实际输入，现在在“自定义”>“Woocommerce”>“产品图像”面板中只有可用的裁剪选项。如果我更改检查器中的硬编码值，图像加载正常，所以我知道它已正确上传。

我什至不知道在这一点上还能尝试什么，我已经做了太久了，这实际上是我需要整理的最后几个细节之一，以便尽快交付这个网站。我在 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=""

标签： cssimageinlineblurry

解决方案

首先，图像是模糊的，因为它们的实际尺寸比它们要填充的区域小得多。[它们只有 262 像素 x 108 像素，并且它们被拉伸到 703 x 277 像素] 所以我会说你需要添加更大的图像。

其次，如果您要添加更大的图像并且 woocommerce 正在裁剪它，请尝试使用插件“Regenerate Thumbnails”[下载量超过百万次]并完成这些步骤。

最后，一旦您添加了较大的图像并且它仍然无法正常工作，请尝试在定制器中更改缩略图裁剪设置。我建议 1-1 或未裁剪。

让我知道这是否有帮助！

编辑：

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

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

这将确保这些图像以其实际大小显示。

推荐阅读