WooCommerce单品形象模糊，体积小。实际图像较大

时间：2013-08-04 作者：naquiuddin

woocommerce产品页面中的图像模糊且不清晰。您可以通过下面的链接看到这一点。

http://childdevelopmentinfo.com/shop/discipline-your-kid-the-right-way-without-shouting-or-spanking/

在更改woocommerce目录设置中的图像尺寸后，我尝试更改CSS并重新生成缩略图，但这种情况仍然存在。

这个问题很奇怪。我认为问题在于产品形象。woocommerce的php文件，返回的是缩略图大小的小图像，而不是中等大小的图像。下面是返回图像的代码。

$image = get_the_post_thumbnail( $post->ID, apply_filters(\'single_product_large_thumbnail_size\', \'shop_single\' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count   = count( $product->get_gallery_attachment_ids() );
知道出了什么问题吗？

谢谢

2 个回复
SO网友:TomHarrigan

我认为@JMau指的是以下内容：

enter image description here

实际图像的宽度只有211像素，显示宽度为281像素，因此发生了像素化。

这里更大的问题是，显示在主产品图像左侧的小缩略图图像会使对齐偏离。将以下内容添加到自定义CSS样式中以修复对齐：

.single-product.woocommerce .product .avatar {
width: 10%;
}
.single-product.woocommerce .product .avatar img {
max-width: 100%;
height: auto;
}
.single-product.woocommerce .product .images {
width: 37%;
}
这将导致所有内容都放在同一行上，而不是将标题/价格/添加到购物车按钮移到图像下方，如下所示：

enter image description here

这也会导致主产品图像始终以217px的宽度显示（我看到它目前在您的产品中有所不同），并且还会减少示例链接上的像素化，因为现在的差异将仅为6px，而不是70px。

SO网友:JMau

看看source file, 您试图以大比例显示一幅小图像，这就是为什么会出现这种模糊。

您必须上载另一个源图像（更大、更高），并可能重新生成缩略图。

结束
标签： themes   plugins   bug   小码农  

相关推荐

How do WP child-themes work?

好的，我已经设置了主主题，现在我创建了一个名为interio\\u child的子主题。从这些instructions 我知道您只需要添加样式。css文件，用于链接到主主题。此外，您还可以添加其他文件来覆盖主主题中的代码。现在我已经激活了我的孩子主题。它只显示“我的子主题”文件夹中的代码，而不显示CSS。这怎么可能？我看过很多教程和wordpress支持主题，但我无法将这个儿童主题链接到我的主主题。这些是我的孩子主题风格的内容。css：/* Theme Name: Interio Child&#x