Le redimensionnement automatique jQuery ne fonctionne pas

Question

Je souhaite ajouter une image à l'intérieur d'un div (#bg) en utilisant jquery pour créer une page Web de redimensionnement automatique. Jusqu'ici j'ai codé comme ceci mais le redimensionnement automatique a quelques problèmes. Si j'ajoute manuellement l'image à div alors tout fonctionne bien. Je suis un novice en jquery si vous pouvez élaborer vos réponses qui seront super. Merci d'avance.

HTML

<div id="bg">​ 
</div>` 

CSS

#bg { position: fixed; top: 0; left: 0; } 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; }` 

jquery

$(window).load(function() { 

    $('#bg').prepend('<img src="Background.jpg" id="bg" alt="" />') 

var theWindow  = $(window), 
    $bg    = $("#bg"), 
    aspectRatio  = $bg.width()/$bg.height(); 

function resizeBg() { 

    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
      .removeClass() 
      .addClass('bgheight'); 
    } else { 
     $bg 
      .removeClass() 
      .addClass('bgwidth'); 
    } 

} 

theWindow.resize(resizeBg).trigger("resize"); 

}); 

Answer 1

J'ai écrit il y a quelques jours une fonction similaire:

HTML

<img src="http://ge.tt/api/1/files/1jN8IzR/0/blob?download" class='bg'> 

CSS pas vraiment nécessaire

.bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -1 
} 

JS

var fitPic = (function() { 
    var winW = $(window).width(), 
     winH = window.innerHeight || $(window).height(); // `innerHeight` for mobile safari 

    $(".bg").each(function() { 

     var elem = $(this), 
      elemW = elem.width(), 
      elemH = elem.height(), 

      imgW = (elemW * winH)/elemH, 
      imgH = (elemH * winW)/elemW, 

      newW = imgH < winH ? imgW : winW, 
      newH = imgH < winH ? winH : imgH; 

     this.style.width = newW + "px"; 
     this.style.height = newH + "px"; 

    }); 
}); 

$(window).on('load resize', fitPic);