Javascript 按比例缩放div以适合视口

我编写了一个小函数，它按比例缩小

div

的大小，直到其高度与视口相同。这很好用。我有两个问题要解决

有没有更干净的方法

视口高度降低后，当视口增加时，它不会向上缩放

函数背后的目标是使

容器

div永远不会高于视口。这需要通过设置

容器

的

宽度

来控制，因为它的内容是响应的。我使用了一个宽度为100%的简单图像进行演示。由于缺少浏览器支持，我没有使用

vh

或

vw

。我需要支持IE8

---

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

要解决视口高度降低时容器高度调整的问题，只需在调用函数时将

宽度

设置为

初始

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

}

函数setImageViewPointHeight（）{
$（'.container'）.css（'width'，'initial'）；targetlight）{
while（容器重量>目标重量）{
containerHeight=containerHeight-（containerHeight*.01）；
containerWidth=containerWidth-（containerWidth*.01）；
}
$（'.container'）.width（containerWidth+'px'）；
}
}

---

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

要解决视口高度降低时容器高度调整的问题，只需在调用函数时将

宽度

设置为

初始

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

}

函数setImageViewPointHeight（）{
$（'.container'）.css（'width'，'initial'）；targetlight）{
while（容器重量>目标重量）{
containerHeight=containerHeight-（containerHeight*.01）；
containerWidth=containerWidth-（containerWidth*.01）；
}
$（'.container'）.width（containerWidth+'px'）；
}
}

---

我会使用

vw

vh

CSS单位将div缩放到视口

IE8不支持它，但您可以找到它的多边形填充

---

我会使用

vw

vh

CSS单位将div缩放到视口

IE8不支持它，但您可以找到它的多边形填充

---

您能接受这种浏览器支持吗@lipp如果可能的话，我想保留IE8。您可以使用此浏览器支持吗@lipp如果可能的话，我想保留IE8。不幸的是，由于浏览器的支持，这种方法将比我当前的实现更加笨拙。我更新了我的问题，强调了我对IE8支持的需求。这就是我建议polyfills的原因：）vmin应该是选择的单位，因为它可以确保大小元素在两个方向上都不会变得太大。谢谢。不幸的是，由于浏览器的支持，这种方法将比我当前的实现更加笨拙。我更新了我的问题，强调了我对IE8支持的需求。这就是我建议polyfills的原因：）vmin应该是选择的单位，因为它可以确保大小元素在两个方向上都不会变得太大。