Question

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

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

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

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

由于

Answer 1

您上传的图片比主题展示区域大，这反过来又会使浏览器缩小您的图片尺寸并猜测＆＃39;如何在更小的尺寸上看起来。这有时会导致渲染效果不尽如人意（如您的情况）。

要解决此问题，您可以：

1）将图像大小调整到所提供的图像区域大小（290x290）左右，这样浏览器就不必缩放和重新采样图像。

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

import { FormControl } from '@angular/forms';

export class PasswordValidator {
    static isNotEqual(control: FormControl) {
        if (control.get('username').touched && control.get('password').touched) {
            if (control.get('username').value != control.get('password').value) {
                return { isNotEqual: true }
            } else {
                return { isNotEqual: false }
            }
        } else {

        }
    }
}

请点击此处查看更全面的解释：

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

目录视图中的模糊图像

1 个答案: