调整大小后的图像变得模糊而不是被像素化

时间:2019-05-15 18:44:50

标签: javascript css reactjs image

所以我正在构建简单的UI,并希望在其中添加像素图。

我有20px x 20px的图像,当我用窥镜或任何软件调整其大小时,它只是被像素化了,这很好:

http://prntscr.com/np1f02

但是,当我添加带有标签的图片并按以下方式设置其宽度和高度时:

<img src={helmetSlot} style={{width: 64, height: 64}}/>

看起来非常模糊: http://prntscr.com/np1flc

这是什么原因?我该如何预防?

已解决: 二手图像渲染:像素化; css proeprty修复它。从来不知道该财产的存在

2 个答案:

答案 0 :(得分:2)

图像渲染:像素化; 搞定了

答案 1 :(得分:0)

因为您将高度和宽度设置为大于源文件。您为什么不以较高的分辨率导出像素图,然后再缩小图像。

示例:将其导出为128px x 128px。然后将其显示为64 x 64应该没问题。