html img标签更改图片尺寸后图片变得模糊

问题描述

HTMl中有个img标签，设置了图片尺寸后，页面 Img图片变得模糊

如图所示，左侧是原图，右侧是页面展示效果(有点模糊)

解决方案

试试Img属性

img{
    image-rendering: pixelated;
}

效果对比

左右顺序依次为：原图，未设置 image-rendering，设置 image-rendering:pixelated

image-rendering 属性值

auto 自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。

smooth 应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。

high-quality Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.

crisp-edges 必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。合适的算法包括最近邻居（nearest-neighbor）算法和其他非平滑缩放算法，比如 2×SaI 和 hqx-* 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。

pixelated 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 auto 相同。