は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

@maxedisonが正しく、要素idを渡すのを忘れてしまった。

srcを変更すると、新しいイメージがまだロードされていない可能性があるので、正しいサイズがresize_bgになるまで表示されません。

あなたはそれがロードされています一度画像のサイズを変更する必要がありますその場合は

：別のノートで

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

---

、私は、あなたの代わりにidのjQueryオブジェクトを取得するにはresize_bgを変更するお勧めしますプラグイン（$.fn.resize_bg）を書いてもよく、それは頻繁に使いたい機能です。

Answer 2

イベントハンドラでresize_bg()を呼び出すときに、element_id引数を省略したようです。その結果、resize_bg()は、サイズを変更する要素を見つけることができません。