??????? 不知道大家发现没有，有时候贴入WordPress的图片尺寸过大，结果导致文章发布后图片撑破页面。整个版式变的一团糟。如果我们要贴入WordPress的大尺寸图片很多，一张一张的去调整尺寸会很麻烦，有没有简单实用的办法（如通过CSS定义）让WordPress把图片自动成比例缩小到一定程度呢？通过GG还真找到相关的方法。
经过实验，发现只要在主题的CSS上加上几句代码即可。
打开所用主题的style.css文件，找到.postcontent img{，如果没有的话直接添加，这里的.postcontent img{不是固定的，不同的主题可能不同，比如我自己用的主题就叫.postcontent img。反正就是找到正文中控制图片的那个代码，如果没有的话直接添加，在后面加上如下代码：
|
1 2 3 |
max-width:600px; width: expression(this.width > 600 ? "600px" : true); height:auto; |
这样就可以实现自动按宽高比缩小了。
网上还介绍了一种用jQuery实现的方法，似乎更智能，我觉得可以配合lightbox使用，效果更佳。
方法：
加载jQuery库
将以下代码加入header.php或单独保存为JS并加载
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(document).ready(function(){ ??? $('div').autoResize({height:750}); });?? jQuery.fn.autoResize = function(options) { ??? var opts = { ??????? 'width' : 700, ??????? 'height': 750 ??? } ??? var opt = $.extend(true, {},opts,options || {}); ??? width = opt.width; ??? height = opt.height; ??? $('img',this).each(function(){ ??????? var image = new Image(); ??????? image.src = $(this).attr('src');?? if(image.width > 0 && image.height > 0 ){ ??????????? var image_rate = 1; ??????????? if( (width / image.width) < (height / image.height)){ ??????????????? image_rate = width / image.width ; ??????????? }else{ ??????????????? image_rate = height / image.height ; ??????????? } ??????????? if ( image_rate <= 1){ ??????????????? $(this).width(image.width * image_rate); ??????????????? $(this).height(image.height * image_rate); ??????????? } ??????? } ??? }); } |
以上两种方法，前者比较傻瓜，后者比较先进，各位自己看着办吧。
转载请注明：网页阁吧 » WordPress图片自动缩放