在现代浏览器中要实现图片随着流动布局相应缩放非常的简单,只需要在CSS中作如下声明:
img{ max-width:100% }
这样就可以使图片自动缩放到与其容器100%匹配。更进一步,可以将同样的样式应用到其他标签上。如:
img,object,video,embed{ max-width:100% }
这样多媒体元素都可以自动缩放了,使用这种方法有几个需要斟酌的问题。第一,要提前准备一张足够大的图片,以备大视口使用。但这也就引出了第二个,同时也是非常重要的问题,无论视口多大,什么设备,都得下载超大图片,可能对某些设备来说,图片大小只要原始图片的25%就好了。另外,在某些情况下,你还不得不因此考虑带宽限制。