目录视图中的图像模糊

Question

我最近创建了一个电子商务网站，并上传了全部为800 x 800的产品图片。问题是在目录视图中它们看上去很模糊，但是在单个产品上它们又好又脆。

主题以290 x 290显示目录图像，默认的CSS为：

@media (min-width: 768px) {
.product-item .wrap-img img {
  width: 100%;
  height: 100%;
 }
}

我怎样才能解决这个问题？ 我需要调整图像大小，使用某种CSS还是其他功能？

谢谢

Answer 1

您上传的图片大于主题显示区域，这反过来又使浏览器按比例缩小图片并“猜测”在较小尺寸下的外观。 有时这会导致渲染效果不理想（就像您的情况一样）。

要解决此问题，您可以：

1）将您的图片调整为恰好/在提供的图片区域大小（290x290）左右，这样浏览器就不必缩放和重新采样图片了。

2）您可以将浏览器使用的图像渲染样式更改为您的首选项之一：

.product-item .wrap-img img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

请参阅此处以获得更全面的说明：