为视网膜显示调整图像大小

Posted 2023-02-25

【中文标题】为视网膜显示调整图像大小

【英文标题】：Resize an image for retina display

【发布时间】：2017-02-25 13:00:55

【问题描述】：

我正在尝试找到一种方法来调整图像的大小以用于 Retina 显示，而不是背景图像或使用不同的图像。

我的计划是使用 800x600 像素的图像，对于普通显示器，只需将其采样到 400x300，但对于视网膜，将其保持在 800x600 但像素密度的两倍，即它看起来显示为 400x300，但它有两倍像素密度。

有没有办法在 CSS 中做到这一点？

我能得到的最接近的方法是找到视网膜比例：

@media only screen and (-webkit-min-device-pixel-ratio: 2) 

但是如何使图像以两倍的像素密度显示，有效地使其在视网膜上的大小减少一半呢？

【问题讨论】：

"对于普通显示器，只需将其采样到 400x300，但对于视网膜，将其保持在 800x600 但像素密度翻倍，即它看起来显示为 400x300" -不需要任何媒体查询，只需 width:400px; height:300px; - 因为 CSS Pixels 和 Device Pixels 是不同的东西。

【参考方案1】：

也许你会通过 imulus 使用这个 Retina.js - 似乎有各种各样的工具可用于处理仅视网膜媒体查询。

这是链接：http://imulus.github.io/retinajs/

不过，这不是处理 CSS 的一种方式，你必须在这里给 javascript 一点爱。