0

这是对以下链接的跟进

为 Retina-ready（网络）准备图像

这是澄清，因为这么多词对不同的人意味着不同的东西。似乎有一张在视网膜和非视网膜设备上看起来都不错的图像：

如果屏幕上的图像的最大宽度为 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。）

4

3 回答 3

0

更简单的方法是使用 的srcset属性img。然后，您可以在每个 CSS 像素中拥有不同设备像素的图像。

尝试在桌面浏览器和支持浏览器的手机中打开此页面： http ://www.webkit.org/demos/srcset/

支持仍然有限，但可能很快就会得到更好的支持：http: //caniuse.com/srcset

于 2014-06-20T22:57:39.727 回答
0

为了广泛的浏览器兼容性，您还可以在容器元素上使用 CSS 背景图像，并使用媒体查询/dpi 查询控制背景文件（视网膜或非视网膜）

看看这个小提琴

#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);
    }
}
于 2014-07-09T11:06:03.553 回答
0

有一个新的响应式图像HTML5 标准。截至 2014 年 7 月，它还只是浏览器的 beta 版本。但是Picturefill polyfill已经可用。

本文很好地解释了不同的用例。但是您在这里想要的是简单地为高分辨率（例如“视网膜”）显示器提供替代图像：

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
于 2014-07-09T10:54:19.500 回答