优搜集

读文章·学知识

JQ如何解决文章内容图片溢出框架大小时自动缩放图片?

5144 人参与 | 时间:2016-03-01 18:05:15

很多时候前端都忘记做了内容中图片过大,造成溢出,使页面错乱。我们来讲讲如何利用JQ完美解决当前问题。


代码如下:


window.onload = function(){

    $(".content").find("img").each(function(){

    var picWidth = parseInt($(this).width());

    if(picWidth > 760)

    {

    var W = $(this).width();

    var H = $(this).height();

    var L = H / W;

    var outH = 760 * L;

    $(this).width(760);

    $(this).height(outH);

    }

    })

};


解释一下代码的意思,以便于大家能够根据实际情况调用和修改。


window.onload = function(){  //窗口加载后执行函数


$("content").find("img").each(function(){  //在class=".content"的元素中,查找img标签(即图片元素),为每一个图片匹配,并执行函


var picWidth = parseInt($(this).width()); //设置变量picWidth的值为当前图片的宽度,并且转化为数字整型


if(picWidth > 760)  //这里的760是指你的页面框架的宽度,超出这个宽度则执行下面的函数进行修正


{


var W = $(this).width();  //获取当前图片的宽度,赋值给pW


var H = $(this).height(); //获取当前图片的宽度,赋值给pH


var L = H / W;  //计算出图片的高宽比例


var outH = 760* L;  //根据已知的宽度760,按照比例计算出图片的高度


$(this).width(760);  //输出图片的新宽度


$(this).height(outH); //输出图片的新高度


}


})


};


本程序已经经过小编亲自测试,可以用兼容IE9.0以上、360、谷歌等主流浏览器。



标签: Javasrcipt CSS
来源:魏成博客,欢迎分享,(微信/电话:weicheng0526/18976961701)
网址:http://www.yousouji.com/index/detail/14.html
本站由魏成开发搭建,由魏成提供技术支持,内容采用互联网转载及站长个人分享的形式。本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,予以删除QQ343420553。
导读
站内搜索
7天内热点
友情链接
Copyright © 2018-2050 优搜集 版权所有 | 版权声明 | 发展历程 | 广告投放 | 本站简介 | 站长QQ:343420553 | 粉丝交流QQ群:39324498
本站由魏成开发搭建,由魏成提供技术支持,内容采用互联网转载及站长个人分享的形式。本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,予以删除QQ343420553。
琼ICP备13002698号-2