確定瀏覽器的高度和寬度來調整圖像到全屏

Question

我想要使用jquery獲取瀏覽器的高度和寬度，並比使用該信息調整我的圖像的大小來適應該尺寸。無論是在筆記本電腦還是大型監視器上查看，我都希望圖像在每個頁面上全屏顯示。我現在擁有1280 dpi標準寬度的所有圖像。

要查看我到目前爲止我已經發布我的代碼我的NYU帳戶：http://i5.nyu.edu/~ejs426/

Answer 1

這完全可以利用CSS來實現。我建議您查看本教程：

http://css-tricks.com/3458-perfect-full-page-background-image/

下面的代碼represnts做事的超級簡單的CSS3的方式。該教程也提供了其他選擇。

html { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

Answer 2

這是我在過去使用，設置默認的高度和寬度，然後試圖通過嘗試檢索各種視口的尺寸來計算的話。

var myWidth = 800; 
var myHeight = 600; 

    if ($.browser.msie) { 
     if (typeof (window.innerWidth) == 'number') { 

      myWidth = window.innerWidth; 
      myHeight = window.innerHeight; 

     } 
     else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 

      //IE 6+ in 'standards compliant mode' 

      myWidth = document.documentElement.clientWidth; 
      myHeight = document.documentElement.clientHeight; 

     } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 

      //IE 4 compatible 

      myWidth = document.body.clientWidth; 
      myHeight = document.body.clientHeight; 

     } 
    } 
    else { 
     myWidth = $(window).width(); 
     myHeight = $(window).height(); 
    } 

Answer 3

jQuery的

var W = $(window).width(), 
    H = $(window).height(); 

$('img').height(H).width(W); 

在調整

function imgsize() { 
    var W = $(window).width(), 
     H = $(window).height(); 

    $('img').height(H).width(W); 
} 
$(window).bind('resize', function() { imgsize(); }); 

CSS

img {height: 100%; width: 100%;}