jquery - 调整浏览器窗口大小时，jQuery 元素（图像和 div）不调整大小

Question

调整浏览器窗口大小时，我遇到了一个小问题。我能够获取视口的宽度和高度，并且可以根据浏览器窗口设置图像大小。但是，当我调整浏览器窗口的大小时，图像或 div 并没有调整大小。

这是我尝试获取视口的宽度和高度并将其应用于相应图像（元素）的内容。

<script type="text/javascript">
// global vars
$(document).ready (function (){
  var winWidth = $ (window).innerWidth();
  var winHeight = $ (window).innerHeight();
  // set initial div height / width
  $('div.background img').css({
    'min-width': winWidth,
    'height': winHeight
  });
  $('.leftstatbar').css({
    'width': '200px',
    'min-height': winHeight
  });
  $(' #firstmenu').css({
    'width': '150px',
    'min-height': winHeight
  });
  $(window).resize(function(){
    $('div.background img').css({
      'min-width': winWidth,
      'height': winHeight});
    });
  });
</script>

请帮助解决此问题。非常感谢。

Answer 1

使用下面的代码。调整功能

$(window).resize(function(){
      var winWidth = $ (window).innerWidth();
      var winHeight = $ (window).innerHeight();
    $('div.background img').css({
      'min-width': winWidth,
      'height': winHeight});
    });

在您的代码中，问题是......在调整大小时，您使用的是在页面加载时计算的值......而不是在调整大小之后......

见http://jsfiddle.net/sL573/