目录视图中的模糊图像

Question

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

主题以 290 x 290 显示目录图片，默认 css 是：

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

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

谢谢

Answer 1

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

要解决此问题，您可以：

1) 将您的图片调整为 exactly/around 提供的图片区域大小 (290x290)，这样浏览器就不必缩放 re-sample 您的图片。

2) 您可以将浏览器使用的图像渲染风格更改为您的偏好之一：

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

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

Blurry Images in catalogue view