首页 > 技术资源分享 > jQuery源码分享 > 文章内容图片过大,超出文章框架的jQuery解决办法
2012
11-25

文章内容图片过大,超出文章框架的jQuery解决办法

可能大家经常会遇到,文章中的内容图片过大,超出了文章页面的宽度。轻则导致图片超出范围,如果没有设置框架宽度的话,还会导致版式严重错误。

当然,可以使用overflow-x: hidden; 加宽度的方法,让超出范围的图片被隐藏,以保证页面的正常,但是这样的话用户就看不到被切去的那部分图片了。

所以这时可以用JS的方式来解决。

分享一串jQuery代码解决这个问题。

代码如下:

window.onload = function(){
$(‘.text_type’).find(‘img’).each(function(){
var picWidth = parseInt($(this).width());
if(picWidth > 622)
{
var pW = $(this).width();
var pH = $(this).height();
var BL = pH / pW;
var outH = 622 * BL;
$(this).width(622);
$(this).height(outH);
}
})
};

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

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

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

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

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

{

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

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

var BL = pH / pW;  //计算出图片的高宽比例

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

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

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

}

})

};

 

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!