如何使用 css 或其他任何东西防止图像在 chrome 中被像素化答案

【问题标题】：How to prevent images from being pixelated in chrome using css or anything else如何使用 css 或其他任何东西防止图像在 chrome 中被像素化
【发布时间】：2022-08-22 19:56:30
【问题描述】：

我正在开发一个反应网站。在我的 Google Chrome 浏览器中，图像显示为像素化（图像渲染：像素化），但在 Firefox 中按预期工作（图像渲染：自动）。这就是区别，

{images[0].preview} 从对象返回图像 url

<img src={images[0].preview} className=\'border w-[250px] z-10 h-[85%] -mr-8 object-cover object-top shadow-portfolio\' alt=\'\' />

这是保持图像渲染与firefox相同的css代码。

img { image-rendering: auto !important }

Firefox Image Preview

Chrome Image Preview

如何在 chrome 中显示图像，如 firefox？我使用 (image-rendering: auto) 作为 img 标签，但不工作。

标签： css reactjs image google-chrome image-rendering

【解决方案1】：

最后，我找到了解决方案。如果图像 mimetype 是 svg+xml，那么它在 chrome 和 firefox 中看起来很完美。

【讨论】：