最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2014-12-10 18:12浏览(1583)

我们会经常遇到一张大图片会“撑破”布局,今天我们介绍两种方法来等比例缩放图片。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

分类:图片代码 > 缩略图 难易:初级
查看演示 下载资源: 112

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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来实现的。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/26.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    10-07 17:53
    ngu137
    怎么演示的呢。。。。。
  • 头像 沙发
    05-19 14:59
    红尘书生梦
    可否实现手动缩放图片
1 2