视网膜缩放图像仍然显得模糊

Question

我将图像缩放为两倍大小以适应视网膜显示。显示尺寸为 350x357，我的图像为 700 x 714。但是，当我将图像添加到页面时，即使保存为高质量 PNG，它仍然看起来模糊。特别奇怪的是，如果我在浏览器中单独打开图像并将其缩放到350x357，它在图像预览中看起来比嵌入在网页上更清晰。我不知道发生了什么！

直接查看图片：

在网页中查看的图像：

Web 检查器中的缩放信息：

Answer 1

这里发生了一些检查员欺诈行为。虽然检查员告诉我“渲染尺寸”是 350x357，但实际上它是 349.8 x 356.79，因为它位于百分比宽度容器内，未完全达到 350px 标记。

在 StackOverflow 上闲逛让我找到了 这个答案，它建议对图像元素应用

transform: translateZ(0);

来修复模糊性。不确定这是否会导致性能问题，但我每页只有几张图像，所以我会冒险。