即使图像分辨率很高，为什么我在 html 中的图像看起来很模糊答案

【问题标题】：Why is my image in html looks blurry even tho the image resolution is high即使图像分辨率很高，为什么我在 html 中的图像看起来很模糊
【发布时间】：2021-03-22 13:04:03
【问题描述】：

嘿伙计们，我正在构建网络应用程序，我网页中的图像看起来很模糊，即使它是高分辨率的。你们能帮我解决吗？

正如您在此处看到的，它看起来很模糊。

这是我的代码：

#album-cover img{
    position: absolute;
    top: 15px;
}

&lt;img src = {name.imageURL} width = "150" height = "150"/&gt;

我该如何解决这个问题？谢谢

【问题讨论】：

单独上传图片，或者网上上传，并在此处提供链接。

标签： javascript html css reactjs

【解决方案1】：

您在哪个网站上工作？我的意思是什么平台？如果你有一个高分辨率图像然后使用 CSS 调整它的大小，它很可能会变得模糊，而如果你将它裁剪或手动调整为 150px x 150px 并上传它，即使你省略它，它也会保持其清晰度CSS 中的宽度和高度如下所示：

【讨论】：

我正在做一个音乐应用，图片是从数据库中获取的，谢谢你的回答:)

【解决方案2】：

问题可能来自您的样式。您将图像的大小设置为 150x150，这可能与原始比例不同。由于必须将图像调整为该比例，因此可能会导致这种行为。

您可以尝试仅使用width 或height 并让其他属性自动计算，或者您可以尝试改用max-height 或max-width。另一种解决方案是您可以在显示之前使用一些库调整图像大小。

【讨论】：

【解决方案3】：

在您的图片样式中插入这一行。当图像被缩小（或放大）时，必须使用图像渲染算法。下面的行将这个渲染算法指定为一个看起来很清晰的算法。

图像渲染：像素化；

查看此链接：https://www.w3schools.com/cssref/css3_pr_image-rendering.asp

【讨论】：