文章内容图片过大，超出文章框架的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); //输出图片的新高度

}

})

};

如果本文对你有帮助，你可以扫描右边的二维码打赏，谢谢支持

联系优畅：uctheme#qq.com (#改为@)
微信订阅号：优畅主题（uctheme）
官网淘宝店：http://uctheme.taobao.com
版权声明：版权归 优畅主题 所有，转载请注明出处！
转载请保留链接： https://www.uctheme.com/technical/500.html