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


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

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

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

本文将从最基本的说起,然后
##最基本的
让图片适应容器的宽度是非常简单的。在你的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

##结论

`