按比例缩放 div 以适应视口答案

【问题标题】：Scale div proportionally to fit viewport按比例缩放 div 以适应视口
【发布时间】：2016-09-27 23:21:44
【问题描述】：

我编写了一个小函数，它按比例减小div 的大小，直到它的高度与视口相同。这完美地工作。我有 2 个问题要解决

有更清洁的方法吗？
一旦视口的高度降低，它就不会在视口增加时按比例放大。

函数背后的目标是使container div 永远不会高于视口。这需要通过设置container 的width 来控制，因为它的内容是响应式的。出于演示目的，我使用了一个宽度为 100% 的简单图像。由于缺乏浏览器支持，我没有使用过vh 或vw。我需要支持IE8。

Demo Jsfiddle

function setImageViewPointHeight() {

  // get current viewport height
  var targetHeight = $(window).height();

  // get current container height
  var containerHeight = $('.container').height();

  // get current container width
  var containerWidth = $('.container').width();


  // only set width if container is higher than viewport
  if (containerHeight > targetHeight) {

    // keep reducing container height/width value by 0.1% until target is reached
    while (containerHeight > targetHeight) {
      containerHeight = containerHeight - (containerHeight * .01);
      containerWidth = containerWidth - (containerWidth * .01);
    }

    // now we have desired calculated width
    $('.container').width(containerWidth + 'px');
  }

}

【问题讨论】：

你能接受这个浏览器支持吗？ caniuse.com/#search=vw
@lipp 如果可能，我想保留 IE8

标签： javascript jquery

【解决方案1】：

我会使用 vw vh CSS 单位将 div 缩放到视口。

https://css-tricks.com/viewport-sized-typography/

IE8 不支持它，但是你可以找到它的 polyfills https://github.com/saabi/vminpoly

【讨论】：

谢谢。不幸的是，由于浏览器支持，这种方法比我当前的实现更笨拙。我更新了我的问题，强调我需要 IE8 支持。
这就是为什么我建议使用 polyfill :)
vmin 应该是首选单位，因为它可以确保元素在任一方向上都不会变得太大。
到 2021 年，这应该不再是问题请参阅：caniuse

【解决方案2】：

考虑到浏览器支持，我认为这种方法没有问题。从我的角度来看，它似乎足够干净。

要解决当视口高度降低时容器高度调整的问题，只需在调用该函数时将width 设置为initial。

function setImageViewPointHeight() {

  $('.container').css('width', 'initial');   <-- add this

  var targetHeight = $(window).height();
  var containerHeight = $('.container').height();
  var containerWidth = $('.container').width();

  if (containerHeight > targetHeight) {
    while (containerHeight > targetHeight) {
      containerHeight = containerHeight - (containerHeight * .01);
      containerWidth = containerWidth - (containerWidth * .01);
    }
    $('.container').width(containerWidth + 'px');
  }

}

JSFiddle

【讨论】：