html - Retina Ready HTML image() 正确的解决方案？

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>