Javascript - 图像将调整大小更改为完整背景

Question

作为一个简单的解释，我创建了一个使用此功能调整大小以填充背景的图像，效果很好：

function resize_bg(element_id){

    $("#"+element_id).css("left","0");
    var doc_width = $(window).width();
    var doc_height = $(window).height();
    var image_width = $("#"+element_id).width();
    var image_height = $("#"+element_id).height();
    var image_ratio = image_width/image_height;      
    var new_width = doc_width;
    var new_height = Math.round(new_width/image_ratio);
    if(new_height<doc_height){
        new_height = doc_height;
        new_width = Math.round(new_height*image_ratio);
        var width_offset = Math.round((new_width-doc_width)/2);
        $("#"+element_id).css("left","-"+width_offset+"px");
    }
    $("#"+element_id).width(new_width);
    $("#"+element_id).height(new_height);

    return true;
}

所以完整的背景图片没有问题。当我使用 Javascript 更改图像源时，问题出现了。换句话说，我将 1 张图像设置为背景，但在页面上某些元素悬停时，图像会发生变化，但不会改变调整大小。因此，加载的第一张图片已正确调整大小和定位，但是当我使用 .attr('src',newimg) 切换图片时，即使我再次调用该函数，图片也未正确调整大小。

这是我用来更改图像和调整大小的代码：

$('#menu_work li a').hover(function(){
    $('#content').hide();
    var img_src = $(this).next('img').attr('src');
    $('#full_screen_img').attr('src', img_src );
    resize_bg();
    $('#full_screen_img').show();
},function(){
    $('#full_screen_img').hide();
    $('#content').show();
});

感谢您的帮助。

Answer 1

在hover 事件处理程序中调用resize_bg() 时，您似乎遗漏了element_id 参数。结果，resize_bg() 找不到您要调整大小的元素。

Answer 2

@maxedison 是对的，你忘了传递元素 id。

另一个问题是，当您更改 src 时，新图像可能尚未加载，因此您将无法在 resize_bg 中获得正确的尺寸，直到它加载。

在这种情况下，您需要在图像加载后调整其大小：

$('#full_screen_img').attr('src', img_src ).load(function() {
    resize_bg('<ELEMENT_ID>');
});
resize_bg('<ELEMENT_ID>');

---

另一方面，我建议您更改 resize_bg 以获取 jQuery 对象而不是 id，或者甚至编写一个插件 ($.fn.resize_bg)，如果它是您想要经常使用的功能。