目录视图中的模糊图像答案

【问题标题】：Blurry Images in catalogue view目录视图中的模糊图像
【发布时间】：2017-01-23 04:14:16
【问题描述】：

我最近创建了一个电子商务网站并上传了所有 800 x 800 的产品图片。问题是在目录视图中它们看起来很模糊，但在单个产品上它们又漂亮又清晰。

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

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

我该如何解决这个问题？我是否需要调整图像大小、使用某种 css 或其他东西？

谢谢

【问题讨论】：

【解决方案1】：

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

要解决此问题，您可以：

1) 将您的图像大小调整为完全/围绕提供的图像区域大小 (290x290)，这样浏览器就不必缩放和重新采样您的图像。

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

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

查看这里以获得更全面的解释：

【讨论】：