Question

我想在窗口调整大小时调整#map元素的大小。但是，如果浏览器窗口重新调整大小并满足930像素宽度，则即使浏览器扩展到全屏宽度，＃map元素也应停止调整大小。

这是我的实际代码。

$(window).on('resize',function(){
  var _frameY = $(window).height(),
      _frameX = $(window).width(),
      _map    = $('#map');

  if (_frameX <= _map.width()) {
    _map.css({ 'width': _frameX, 'height': _frameY });
  } else if (_frameX >= 930) {
    _map.css({ 'width': _frameX, 'height': _frameY });
  }

}).resize();

我想维持#map的930像素以下的调整大小功能，但是当浏览器的屏幕宽度调整大小并超过931像素时，＃map元素应该停止调整大小并保持930像素宽度。

Answer 1

这部分是错误的，因为＆＃34; .width（）＆＃34;返回元素的当前宽度，而不是CSS元素中的值。所以你必须在你的代码中设置你的条件中的930px值。

  if (_frameX <= _map.width()) {
    _map.css({ 'width': _frameX, 'height': _frameY });
  } else if (_frameX >= 930) {
    _map.css({ 'width': _frameX, 'height': _frameY });
  }

Answer 2

我在这里找出了导致我的问题的原因。因此，我没有提取_map.width()的值，而是使用我的CSS在主框架上抛出的确切值。

$(window).on('resize',function(){
  var _frameY = $(window).height(),
      _frameX = $(window).width(),
      _map    = $('#map');

  if (_frameX <= 930) {
    _map.css({ 'width': _frameX, 'height': _frameY });
  } else if (_frameX >= 930) {
    _map.css({ 'width': 930, 'height': 590 });
  }

}).resize();

如何在满足元素的宽度大小时停止调整大小

2 个答案: