Question

我有一个名为home set的ID为图像的部分的背景。图像的纵横比为1.5。我写了一些非常基本的javascript来确保当窗口大小改变时，该部分按照图像的纵横比进行缩放。在该部分的内部，我在带有类容器的div中有内容。该内容具有一定的垂直高度。我写的基本javascript不允许该部分的高度小于内容的高度。因此，此时该部分将停止使用窗口大小进行缩放。我遇到的问题是，当您将窗口缩放到该点然后再返回时，该部分不会缩放。

我已经创建了一个小提琴手来帮助解释。 http://jsfiddle.net/Chadimoglou/Bpryg/我建议在移动模式下测试它。要重新创建我正在做的事情，让窗口全屏显示。抓住一个底角并调整大小以查看背景大小和纵横比。然后调整大小，使其小于红色内容框的高度和宽度。在那之后，再次退出，你应该看到我遇到的问题。下面是我的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();

});

Answer 2

我不是一个优秀的JS编码器，但是遵循逻辑：

要保持宽高比，您可以使用JS修改CSS：How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

要知道您是否应该在自动设置高度或宽度，您需要知道屏幕尺寸是否大于图像或高于纵横比图像。只需比较两个纵横比，然后你就会知道哪一个将在auto上。像这样，您的图像将永远不会在您的背景上留下未填充的部分，并将扩展到它的全宽或全高，具体取决于客户端宽高比和图像宽高比。

您可以使用：

document.documentElement.clientWidth

和

document.documentElement.clientHeight

获取客户端窗口大小并计算宽高比。

根据窗口大小和宽高比缩放图像

2 个答案: