×

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

优畅主题 Wordpress技术 2013-10-08 16:47 3,264 0 条评论

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

当然,可以使用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
谢谢支付宝打赏
谢谢微信打赏

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!


2 + 7 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册