Question

在视口变小/最小化时尝试进行图像缩放并将高度调整为更大的尺寸，而不是相反。例如，当我缩小窗口时，图像在页面上的长度会变长。

background-image: url(../images/bgimg-aboutme.jpg);
/* Settings */                                  /* Settings */
height: 50vmin;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

请帮助我，我真的很想知道这是如何从js或其他语言完成的。谢谢！

Answer 1

这应该作为如何在JavaScript中实现所需内容的基本示例。我们做一些基本的假设来计算图像的高度：对于视口高度的每个百分比，包装器都会缩小，图像将增加一个百分比。因此，如果包装器为99vh，则图像将为101vh。

此示例说明了如何实现所需的功能，应该可以从此处完成。

// get the image
let imgObj = document.getElementById('image')
// get the wrapper
let wrapper = document.getElementsByClassName('image-wrapper')[0]
// get the viewport height
let viewPort = window.innerHeight
// get the wrapper height
let wrapperHeight = wrapper.clientHeight
// calculate the image size based on the size of the wrapper as a percentage of the viewport.
// E.g. If the wrapper is 40% of the viewport, the image will be 160% of the viewport
let imageHeight = 200 - ((wrapperHeight / viewPort) * 100)
// set the new image height
imgObj.style.height = imageHeight + 'vh'

body {
  padding: 0;
  margin: 0;
}
.container {}
.image-wrapper {
  position:relative;
  overflow:hidden;
  width: 100vw;
  height: 100vh;
}
.image-content {
  position: absolute;
}
#image {
  background: blue;
}

<div class="container">
  <div class="image-wrapper">
     <img src="https://placeimg.com/640/480/any" id="image" />
  </div>
</div>

Answer 2

您也许可以仅使用CSS来实现此目的，但是在这种情况下，我宁愿使用CSS + JS，因为它会给您一些细粒度的控制。您可以设置所需的maxImageWidth，maxClientWidth，maxClientHeight和minClientWidth，而不会导致图像在浮动div中跳转。我也限制了 resize事件：

!function(){
  var img = document.getElementsByTagName("img")[0],
      maxImageWidth  = 4000,
      maxClientWidth = 2000,
      maxClientHeight  = 1000,
      minClientWidth = 200;

  window.addEventListener("resize",function(e){
    if(img._busy){return}
    img._busy = true;
    window.requestAnimationFrame(function(){
      adjust();
      img._busy = false;
    })
  });

  function adjust(){
    if(!img._ratio){
      var rect = img.getBoundingClientRect();
      img._ratio = rect.height/rect.width;
    }
    var w = document.documentElement.clientWidth,
        currentImageWidth = maxImageWidth * (1 - Math.max(0,Math.min(1,(w - minClientWidth)/(maxClientWidth - minClientWidth))));
    img.style.width = currentImageWidth + "px";
    var currentImageHeight = currentImageWidth * img._ratio;
    img.style.marginTop = -Math.max(0,(currentImageHeight - maxClientHeight)/2) + "px";
  };


  adjust();
}();

也不要忘记在img上添加min-height:100%和min-width:100%。查看此 FIDDLE 在常绿浏览器+ ie11上进行了测试。

CSS视口反转图像高度

2 个答案: