用jquery控制图片的最大宽度


选了这个3 columns的wordpress模板,发现一个问题,就是如果图片比较大,页面的排版会被撑乱,css正在学习中,还没搞清楚到底该咋改,如果您能帮我请留言。
正好看了一些jquery的资料,就拿这个问题来练手,基本思路是查看所有网页上的图片,如果大于一个数值,则设定宽度,否则,就按照原来的尺寸显示。代码如下:

$(document).ready(function() {
$("img").each(function(i){ 
	var maxwidth=screen.width-$("#column2").width()-$("#column3").width()-100;
	if (this.width>maxwidth)
	 this.width = maxwidth; 
	});
});

第一行不用解释了吧?
第二行是查找所有img标签,每一个做后边的function处理
第三行设定最大的宽度,我这里取得是屏幕分辨率减去左右2列的宽度和一个常量。
第四,五行判断图片的宽度,如果超过这个宽度则设其宽度为允许的最大宽度。

现在看来,第三行应该和第二行换一下,效率应该会高些,这么写还有一个问题就是必须浏览器最大化才正常,还有什么好的解决方案呢?
————
想做一个点击阅读全部,显示所有内容的功能,对用户体验有好处,二来对seo有好处,还没时间做,空下来再说吧。


《“用jquery控制图片的最大宽度”》 有 2 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据