Question

我们知道我们可以使用css3媒体查询（如

）准备好视网膜图像

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
    }

以上媒体查询，为背景图像制作视网膜就绪图像。有没有办法让HTML图像视网膜就像

一样准备就绪

<img src="example.png" />

我需要在这里提一些问题。我的图片尺寸为274x48。它在视网膜屏幕上看起来很模糊。这是我拥有的这张图片的最高分辨率。有没有办法使图像视网膜准备好保持现有的尺寸和分辨率。在此先感谢！

是否可以制作低分辨率图像RETINA READY？它在每个屏幕上都很好但在视网膜屏幕上有点模糊！

Answer 1

您应该使用<picture>元素：

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

Answer 2

除非您提供更高的光源分辨率/质量，否则无法将图像设为“视网膜准备就绪”。

您可能拥有的一个选项是在photoshop或其他编辑器中打开图像并进行缩放，然后应用一些抗锯齿过滤器以使边缘看起来更好，然后使用媒体查询添加它。除此之外，你别无选择。

Retina Ready HTML图像（<img/>）正确的解决方案？

2 个答案: