css - 目录 View 中的模糊图像

Question

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

主题以 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;
}

请参阅此处以获得更全面的解释:

https://css-tricks.com/almanac/properties/i/image-rendering/