jQuery自動調整大小不起作用

Question

我想使用jquery在div（#bg）中添加一個圖像來創建一個自動調整大小的網頁。到目前爲止，我已經編碼這樣，但自動調整大小有一些問題。如果我手動添加圖像到div然後一切工作正常。我是jquery的新手，如果你能詳細闡述你的答案，那將是非常棒的。提前致謝。

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

我前幾天類似的功能寫着：

HTML

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

CSS 不是真的需要

.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);