jQuery等比例缩放大图片_大图片自适应页面布局

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

1、第一种方法：根据图片外面容器宽度来设置图片宽和高。

var w = $("#demo1").width(); //图片外层容器宽度 
$("#demo1 img").each(function() { //若多个图片
    var img_w = $(this).width(); //图片宽度 
    var img_h = $(this).height(); //图片高度 
    if (img_w > w) { //若图片宽度超出容器宽度 
        var height = (w * img_h) / img_w; //高度等比缩放 
        $(this).css({
            "width": w,
            "height": height
        }); //设置缩放后的图片宽度和高度 
    }
});

2、第二种方法：通过jQuery.autoIMG.min.js来使所在区域的图片自适应。

$("#demo2").autoIMG();//插件自动设置图片宽高

值得一提的是，当页面加载的图片尺寸未知的情况下，用该插件利用浏览器获取图片文件头尺寸数据，无需等待图片加载完成。当然你还可以用CSS中的overflow:hidden 来控制显示，真正的缩放还是要靠js来实现的。