在Woocommerce中，图像标签会导致产品的外观混乱

Question

我已经在我的woocommerce商店下安装了一个插件，以便为葡萄酒显示适当的图标奖励。当我在woocommerce的左上角添加图像图标时，在移动网站上看网站，图像看起来很混乱，像是被挤压和拉伸的。如果你看一下网站主页http://letmewine.com/和手机上的产品"francciacorta BRUT"ALMA"BELLAVISTA"，你就会明白我的意思。我尝试将z-index值位置分配给绝对或相对于该图像图标，但没有发生任何事情。我想听听你的建议。

谢谢你的帮助

Answer 1

问题是你的图像是绝对的，并设置了width:100%, height:100%，这使得被拉伸。这是因为图片试图填充整个holder，而holder的实际尺寸大于图片的大小。

你应该改变你的style.css在第11739行，那里是图像的选择器(.post_featured img)，并改变你的代码将成为:

.post_featured img {
    width: auto;
    height: auto;
}