在 FF / Chrome 上按比例缩小时，retina @2x 图像不清晰答案

【问题标题】：retina @2x image not crisp when scaled down on FF / Chrome在 FF / Chrome 上按比例缩小时，retina @2x 图像不清晰
【发布时间】：2014-09-09 19:25:11
【问题描述】：

我觉得发布这个非常基本的 html 问题很愚蠢，但我完全被难住了。我有一个 100x100 像素的图形 (test@2x.png)，我将其用作图像，然后调整为 50x50。这应该会为视网膜和非视网膜屏幕带来清晰的图像……但它不会（在 Chrome 和 Firefox 中，Safari 很好）。

保存为 50x50 的相同图像（未通过 CSS 调整大小）并且原始显示可以 100%，但是当原始 100x100 缩小时，它会变得不稳定。

从技术上讲，我不明白这怎么可能发生。鉴于我有一个视网膜屏幕，它应该完全相反：100% 的图像不是很清晰，而 2x 图像缩放到 50% 是。

我之前一定已经做了一千次了，没有问题，有人知道发生了什么吗？

<img src="http://stacyrobyn.com/dev/retina/test@2x.png" width="50" height="50" />

小提琴：http://jsfiddle.net/pixeloco/84n141vc/

我看到的屏幕截图（iMac/retina 支持，Chrome v37）：http://i.imgur.com/CS3sJOD.png

【问题讨论】：

我怀疑 Chrome 和 Firefox 中的调整大小是针对速度而不是质量进行调整的。
我假设您正在将媒体查询设置为这样的内容。 @media all and (-webkit-min-device-pixel-ratio: 2) {
@pixeloco 我想知道使用 jpeg 而不是 png 是否会有所不同。

标签： image scale antialiasing retina

【解决方案1】：

这个问题的答案是我是个白痴…… iMac 不支持 Retina。我特别喜欢我承认我所看到的与视网膜屏幕应该做的“完全相反”（又名：像非视网膜屏幕一样显示）但没有把两个和两个放在一起。我现在要躲起来……

【讨论】：

我认为您仍然有一个有效的问题，屏幕截图和手动调整大小的图像之间存在明显差异。