調整窗口大小的圖像大小？

Question

我試圖使用對象適合，但它似乎不與新瀏覽器等非常兼容 - 我只是想要它覆蓋的空間不會被壓縮時調整大小，有沒有在CSS或jQuery的方式只是覆蓋空間而不是調整大小和壓扁？

Answer 1

如果確定與另一元件而不是圖像標籤上使用的背景圖像，則可以使用background-size: cover這樣的：

#myDiv{ 
    background-image:url(/path/to/bg/image); 
    background-size: cover 
} 

Answer 2

視口設置到後使用視width和height屬性設備寬度，這樣的：

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

而且你的CSS：

width:100vw; height:100vh; /*this is like a percentage of the viewport width and height*/ 

Answer 3

使用jQuery，

$(function() { 

     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(function() { 
      resizeBg(); 
     }).trigger("resize"); 

    }); 

見demo here