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

Scaling an image with respect to window size and aspect ratio

本文关键字：缩放 图像 窗口大小      更新时间：2023-09-26

我有一个部分的背景，ID为home，设置为图像。该图像的纵横比为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();
});

提前感谢您的帮助。

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();
});

我不是一个好的JS程序员，但遵循以下逻辑：

为了保持纵横比，你可以用JS修改CSS：在IE6中使用一个（CSS）维度缩放图像时，如何保持纵横比？

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

您可以使用：

document.documentElement.clientWidth

和

document.documentElement.clientHeight

以获得客户端窗口大小并计算纵横比。

相关文章：