在布局页面时，有时会遇到大图片将页面容器“撑破”的情况，尤其是加载外链图片（通常是通过采集的外站的图片）。那么本文将为您讲述使用jQuery如何按比例缩放大图片，让大图片自适应页面布局。

<!-- 图片自适应-->

1. <script type="text/javascript">
2. window.onload=function(){
3. var w = $(".info").width();//获取容器宽度
4. $(".info img").each(function(i){//如果有很多图片，我们可以使用each()遍历 
5. var img_w = $(this).width();//获取图片宽度
6. var img_h = $(this).height();//获取图片高度
7. if(img_w>w){//如果图片宽度超出容器宽度--要撑破了 
8. var height = (w*img_h)/img_w;//高度等比缩放 
9. $(this).css({"width":w,"height":height});//设置缩放后的宽度和高度 
10. }
11. });
12. }
13. </script>

如果图片获取不到宽高的话上面代码就不生效了，可以使用jQuery.autoIMG.min.js 插件实现。

autoIMG可以快速对文章图片进行尺寸自适应，它利用浏览器获取图片文件头尺寸数据，无需等待图片加载完成。

autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...

调用autoIMG插件方法相当简单：

代码如下 ：

1.  $(function(){ $("#demo2").autoIMG(); });