如何选择响应式图片解决方案

by · 2016年01月01日 · 931 Words · ~2min reading time | Improve on


原文链接： 如何选择响应式图片解决方案

如果你已经走上了响应式设计之路，那么你肯定需要一个响应式图片解决方案。

响应式设计基本知识很容易学，但是当你掌握了它们，就会发现缩放图片只是个开始--你需要解决性能、艺术设计问题等等。你会发现有许多可选的响应式图片解决方案，它们各有千秋，但没有一个是完美的。

本文将从最基本的说起，然后
##最基本的
让图片适应容器的宽度是非常简单的。在你的normalize 或是 reset 样式表里，加入下面这条

img {
    max-width: 100%;
}

在大多数情况下，这条简单的规则就够了。当容器的宽度小于图片的宽度时，图片会缩放到与容器宽度一致。将max-width设为100%还保证了图片不会被拉伸，也就不会变模糊。如果你还要兼顾到IE6、7的话，那么你就需要给这些浏览器添加width:100%，因为它们不支持max-width。

高分辨率的retina屏会使这个最基本的实现方式有些问题。假设你想让你的150px * 150px的logo在retina屏显示双倍像素。所以，你创建了一个300px * 300px版本的logo，但是现在logo太大了。你第一反应可能是增加下面的样式：

img.sitelogo {
    max-width: 150px;
}

非常不幸，这样的话，logo的图片就不会像其他图片一样友好的自适应了。

要想限制这类图片的最大宽度，你只能通过限制图片容器的最大宽度，而不是图片本身。假设你用一个class为branding的标签包裹住logo图片，你只需添加下面的样式就ok了：

.branding {
    max-width: 150px;
}

现在我们可以在流体布局的网页中使用响应式图片了。任务完成，终于可以出去晒晒太阳了。

别着急，还有两个问题需要我们解决。

##性能问题

上面提到的响应式图片解决方案，所有设备都是用相同的通篇。小图标和logo也许还好，但是对于那些大图片而言，问题就比较严重了。retina的出现使问题更加的棘手，你肯定不会想给那些不能显示那么多细节的显示提供retina高清大图。

###更进一步：浏览器预加载

###带宽检测

##“艺术指导”问题

##如何选择

幸运的是，前端和设计社区并不缺乏创造力。

需要考虑的因素：

  • 是否需要解决“艺术指导”问题（例如：不同的图片比率，在不同宽度时裁剪和）
  • 你的网站是否特别大

##行之有效的响应式图片解决方案

###PICTUREFILL

###HISRC

###ADAPTIVE IMAGES

###SENCHA.IO SRC

##有待观察的响应式图片解决方案

###CAPTURING/MOBIFY.JS 2.0

###RESRC.IT

##测试

###YSLOW

###WEBPAGETEST

##结论

Tags:

`