Question

我编写了一个小函数，按比例缩小div的大小，直到它的高度与视口相同。这非常有效。我有两个问题我想解决

有更清洁的方法吗？
视口高度减小后，视口增加时不会向上缩放。

该函数背后的目标是container div永远不会高于视口。这需要通过设置width的{{1}}进行控制，因为内容具有响应性。为了演示目的，我使用了宽度为100％的简单图像。由于缺乏浏览器支持，我没有使用container或vh。我需要支持IE8。

Demo Jsfiddle

vw

Answer 1

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

要在视口高度降低时解决容器高度调整问题，只需在调用函数时将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

Answer 2

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

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

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

按比例缩放div以适合视口

2 个答案: