Retina Ready HTML图像(<img/>)正确的解决方案?

时间:2015-04-12 17:13:13

标签: html css image css3 retina-display

我们知道我们可以使用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?它在每个屏幕上都很好但在视网膜屏幕上有点模糊!

2 个答案:

答案 0 :(得分:3)

您应该使用<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>

答案 1 :(得分:2)

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

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