如何制作可在视网膜和非视网膜设备上使用的视网膜就绪图像
这是以下链接的后续链接
Preparing the images for retina-ready (web)
这是澄清，因为太多的单词对不同的人意味着不同的事情。它似乎有一个图像，在视网膜和非视网膜设备上看起来都很好：
如果屏幕上的图像的最大宽度为400，最大高度为300，则图像本身应为800 x 600，ppi为144。则应高度压缩该文件，以最小化其下载时间。
当您显示图像时，使用css/html代码将其强制为最大宽度和最大高度，如下所示：
<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />这是正确的吗？(我已经决定，我们公司将不再使用responsive.js或cdn。)
回答 3
Stack Overflow用户
发布于 2014-06-21 06:57:40
一种更简单的方法是使用img的srcset属性。然后，您可以在每个CSS像素中使用不同设备像素的图像。
请尝试在桌面浏览器和支持浏览器的手机中打开此页面：http://www.webkit.org/demos/srcset/
支持仍然有限，但可能很快就会得到更好的支持：http://caniuse.com/srcset
Stack Overflow用户
发布于 2014-07-09 18:54:20
有一个新的响应式图像HTML5 standard。截至2014年7月，它还只有beta builds of browsers版本。但是Picturefill polyfill已经可以使用了。
This article很好地解释了不同的用例。但这里你想要的只是为高分辨率(例如'retina')显示器提供一个替代图像：
<img srcset="small.jpg 1x, large.jpg 2x"
src="small.jpg"
alt="A rad wolf" />Stack Overflow用户
发布于 2014-07-09 19:06:04
为了广泛的浏览器兼容性，您还可以在容器元素上使用CSS背景图像，并使用media queries / dpi queries控制背景文件(视网膜或非视网膜)
查看此fiddle
#container {
background-image: url(http://placehold.it/200x200);
width: 200px;
height: 200px;
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
background-image: url(http://placehold.it/400x400);
}
}https://stackoverflow.com/questions/24333958
复制相似问题
腾讯云开发者
