javascript - 根据窗口大小和纵横比缩放图像

Question

我将 ID 名为 home 的部分的背景设置为图像。图像的纵横比为 1.5。我已经编写了一些非常基本的 javascript 以确保当窗口大小时更改时，该部分会根据图像的纵横比进行缩放。在那个部分里面，我在一个带有类容器的 div 中有内容。此内容具有一定的垂直高度。我编写的基本 javascript 不允许该部分的高度小于内容的高度。因此，此时该部分停止随窗口大小缩放。我遇到的问题是，当您将窗口缩放到超过该点然后再返回时，该部分不会按比例放大。

我创建了一个 fiddler 来帮助解释。 http://jsfiddle.net/Chadimoglou/Bpryg/我建议在移动模式下测试它。要重现我正在做的事情，请让窗口全屏显示。捕获底 Angular 并稍微调整大小以查看背景随纵横比调整大小。然后调整大小，使其小于红色内容框的高度和宽度。之后，再次退出，您应该会看到我遇到的问题。下面是我的 JavaScript 代码片段。

$(document).ready(function() {

  var theWindow = $(window),
  aspectRatio = 1920 / 1280;

  function resizeBg() {
    $("#home").width(theWindow.width);
    if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() ) {
      $("#home").width( $("#home > .container").height()*aspectRatio );
    }
    $("#home").height($("#home").width()/aspectRatio);
  }

  theWindow.resize(resizeBg);
  window.onload=resizeBg();

});

在此先感谢您的帮助。

Answer 1

http://jsfiddle.net/Bpryg/3/

$(function() {

  var $w = $(window),
      $h = $('#home'),         // CACHE YOUR SELECTORS
      aspectRatio = 1920 / 1280;

  function resizeBg() {
    $h.width($w.width());      // YOUR ERROR ( should be width() )
    if( ( $h.width()/aspectRatio ) <= $("> .container", $h).height() ) {
      $h.width( $(" > .container", $h).height()*aspectRatio );
    }
    $h.height( $h.width()/aspectRatio);
  }

  $w.resize(resizeBg);
  $w.onload=resizeBg();

});