调整窗口大小的图像大小？

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