我们知道我们可以使用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?它在每个屏幕上都很好但在视网膜屏幕上有点模糊!
答案 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或其他编辑器中打开图像并进行缩放,然后应用一些抗锯齿过滤器以使边缘看起来更好,然后使用媒体查询添加它。除此之外,你别无选择。