其实标题应该叫《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

代码效果:

Landscape
Portrait
图片属性

上面三月份写的代码有问题,表现在图片不能根据窗口大小动态缩放。今晚一通操作后,用很简单的几句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);
			}
		}
	})
}

共有 0 条评论

       

发表评论

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