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/

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

1 个答案: