竹炉山房

其实标题应该叫《jQuery自动调整人像图片（Portrait image）尺寸》。最近复古心盛，重调回了窄单栏布局。由于CSS的局限性，风景图片（Landscape image）会自适应缩小，但人像图片不会同比例缩小，只能以原始尺寸显示在眼前，显得很扎眼。

问题困扰了其实有年头了，也没花力气去找代码，甚至还问了B乎，没人答……

今晚在网上找到了jQuery自动调整图片尺寸的代码，稍作修改，亲测有效。不过代码本身写得烂，目前还没想到更简洁的方法，先抛个砖，请高手指正。

var resize_rate = 0.772;
var portrait_width = 700 * resize_rate;
$(document).ready(function(){
    $('div').autoResize({width:portrait_width});
});
$.fn.autoResize = function(options)
{
    var opts = {
        'width' : portrait_width
    }
    var opt = $.extend(true,{},opts,options || {});
    width = opt.width;
    $('img',this).each(function(){
    var image = new Image();
    image.src = $(this).attr('src');
    if(image.width > 0 && image.height > 0 ){
        if(image.width <= image.height && image.width >= 20){
    $(this).width(image.width * resize_rate);
    $(this).height('auto');
        }
    }
    });
}

注：该代码与WordPress内置的懒加载冲突，需注销懒加载代码。

add_filter('wp_lazy_loading_enabled', '__return_false');

如果上面的代码依旧无效，可安装插件Disable Lazy Load。

代码效果：

上面三月份写的代码有问题，表现在图片不能根据窗口大小动态缩放。今晚一通操作后，用很简单的几句js真正实现功能，也跟懒加载没有任何冲突。

ImgLimit($('.wp-block-image img'));
function ImgLimit(obj){
	var maxWidthLandscape;
	var maxWidthPortrait;
	//下面两句硬编码较蠢
	maxWidthLandscape = 772;
	maxWidthPortrait = 516;
	if (maxWidthLandscape > $(window).width()) {
		maxWidthPortrait = maxWidthPortrait * $(window).width() / maxWidthLandscape;
	}
	obj.each(function(){
		if ($(this).width() >= 400) {
			if($(this).height() >= $(this).width()) {
				$(this).width(maxWidthPortrait);
			}else {
				$(this).width(maxWidthLandscape);
			}
		}
	})
}