网站上的图像质量比Windows应用程序差

Question

我通过

<div class="position-relative" style="height: fit-content; width: fit-content">
    <img class="image-size" src="xyz.png" alt="...">
    <span>...</span>
</div>

css类image-size只设置高度：.image-size {height: 400px}。

问题是，网站上的图像质量比Windows应用程序差得多。下面的图像描述了这一点。)我放大了一点。因此，也可以在Windows应用程序中看到像素。(这没问题。)

​

左: Windows Fotos应用程序，中间:网站

我在Edge、Chrome和Firefox上测试了它。Firefox以良好的质量显示图像。这似乎是一个已知的问题，铬浏览器，我发现了一个可能的修复这里。不幸的是，css img {image-rendering: -webkit-optimize-contrast;}甚至使我的情况更糟。这是描绘在右手边。我测试了image-rendering属性的不同值，但没有得到令人满意的结果。

有办法解决这个问题吗？

Answer 1

这确实与chrome渲染图像的方式有关。据我所知(在我看来)，除了使用：image-rendering: pixelated;之外，没有办法在任何地方获得相同的结果。

剩下的，你可以使用这3中的任何一个。只要测试，看看你最喜欢哪一个。

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

在这里，您可以查找有关以下内容的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering