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

在element_id事件处理程序中调用resize_bg()时，您似乎遗漏了hover参数。因此，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）经常使用。

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

2 个答案: