其实标题应该叫《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。
代码效果:
2022年7月5日
上面三月份写的代码有问题,表现在图片不能根据窗口大小动态缩放。今晚一通操作后,用很简单的几句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