响应式设计核心技术之弹性图片

发布日期:2016-12-09
浏览次数:152
  
响应式网站设计中,如何处理图片是一个非常重要的方面。在设计历史上,很多同比缩放图片的技术,但很少有简单可行的。所谓液态图片或弹性图片,是人们对这种需求的一个高度概括的命名方式。简单地讲,就是图片在根据屏幕大小伸缩的时候,图片的比例保持不变。目前,起飞页采用的技术一种比较流行的技术,即使用CSS的max-width属性。这个方法,最早由Richard R.最先尝试,Ethan M. 的液态图片一文中也有提及的。我们只需要简单的一行代码,就可以实现这个特性。这个魔法代码就是:
 
img { max-width: 100%;}
 
如果没有其他的样式属性覆盖掉这个样式,那么在我们打开一个网页的时候,页面上所有的图片,都会按照预设的宽度进行加载。如果屏幕的大小小于这个预设的宽度,那么图片的宽度就会小于预测的宽度。当然这个宽度,也是图片所在容器的宽度,如果容器的宽度变小,那么图片的宽度也会跟随变小。这个办法的好处在于,和已经存在的代码冲突的可能性非常小,非常容易部署和实现,也非常安全。下图展示了在不同大小的浏览器中同一个图片的显示方式:
 
 
 
弹性图片这个技术,虽然简单好用,但也有限制。我们只能将其应用于有IMG标签的图片,并不能应用于背景图片。原因是背景图片并不能改变容器的高度,所以也不能和容器一起变化。你也可以理解为,在不同的分辨率下,容器的比例发生了变化,背景图片没有办法,跟随容器一起变化。我们会在其他的文章中,再详细讨论这个问题。
 
起飞页系统中的图片组件,已经使用了这个技术。也就是说在起飞页的图片组件中,图片会根据设备进行缩放。其实,除了弹性图片,起飞页还会根据不同的设备,自动对图片进行压缩,如果使用手机访问的话,您所查看的图片的宽度不会超过320像素,这会大大提高3G网络访问网站时的速度。当然,如果您不在乎客户使用手机打开网站的速度,也可以关闭掉这个功能。

登录后即可发表评论,立即登录.