javascript - CSS 按视口(viewport)反转图像高度

Question

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

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

您也许可以仅使用 css 来实现此目的，但在这种情况下我更愿意使用 css + js，因为它会给您一些细粒度的控制。您可以设置所需的 maxImageWidth、maxClientWidth、maxClientHeight 和 minClientWidth，而不会导致图像在 float 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 上测试。