选了这个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 条评论
要是控制图片大小后能再打开大图,效果就完美了…
顶,支持一下。。学习了。。嘿嘿。。