如何使幻灯片图像在不同的视口尺寸下按比例缩放？答案

【问题标题】：how can I make slideshow images scale proportionately at different viewport sizes?如何使幻灯片图像在不同的视口尺寸下按比例缩放？
【发布时间】：2019-01-06 03:50:28
【问题描述】：

我找到了我非常喜欢的图像幻灯片的代码，但在不同的浏览器尺寸下没有调整大小。我尝试使用 vh 属性来实现这一点，但它不起作用——我无法让图像按比例缩放。所以我尝试添加属性 max-width: 100% 和 height: auto 这使得图像按比例缩放。但是会出现以下情况：

当您缩小浏览器窗口大小时，只有最宽的图像会在所有点按比例缩放；其他的将保持静态，直到浏览器窗口等于指定的宽度和高度属性定义的图像宽度。
图像在调整大小的浏览器窗口中居中，只要其宽度为 1732 像素（最宽图像和包含图像的“舞台”ID 的宽度）或更大。

有没有办法让所有图像在所有浏览器尺寸下都缩小？

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">

  #stage {
    margin: 1em auto;
    width: 1732px;
    height: 1080px;
    }

  #stage img {
    position: absolute;
    max-width: 100%;
    height: auto;
    }

  #stage img {
    padding: 10px;
    border: ;
    background: #fff;
  }

  #stage img:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }

  #stage img:nth-of-type(2) {
    z-index: 10;
  }

  #stage img:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }


    </style>
    </head>
<div id="stage">
<img src="http://www.bartonlewisfilm.com/cf_spring_&_thompson_east_v_1080.jpg" width="1394" height="1080">
<img src="http://www.bartonlewisfilm.com/cf_suffolk_btw_rivington_&_stanton_v_1080.jpg" width="1732" height="1080">
<img src="http://www.bartonlewisfilm.com/dr_chrystie_93_v_1080.jpg" width="1165" height="1080">
<img src="http://www.bartonlewisfilm.com/cf_franklin_&_w_bway_v_1080.jpg" width="726" height="1080">
    </div>

 <script type="text/javascript">

  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  window.addEventListener("DOMContentLoaded", function(e) {

    var maxW = 0;
    var maxH = 0;

    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("img");
    for(var i=0; i < arr.length; i++) {
      if(arr[i].width > maxW) maxW = arr[i].width;
      if(arr[i].height > maxH) maxH = arr[i].height;
    }
    for(var i=0; i < arr.length; i++) {
      if(arr[i].width < maxW) {
        arr[i].style.paddingLeft = 10 + (maxW - arr[i].width)/2 + "px";
        arr[i].style.paddingRight = 10 + (maxW - arr[i].width)/2 + "px";
      }
      if(arr[i].height < maxH) {
        arr[i].style.paddingTop = 10 + (maxH - arr[i].height)/2 + "px";
        arr[i].style.paddingBottom = 10 + (maxH - arr[i].height)/2 + "px";
      }
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

</script>

</html>

【问题讨论】：

所以你想让高度占宽度的百分比还是什么？
目前，当在超过最宽图像尺寸的屏幕尺寸上查看时（我在 27" 显示器和 15" 笔记本电脑上查看幻灯片），图像按比例正确。我希望它们在较小的设备上查看时按比例正确，无论这些设备的视口大小低至大约 720 像素。

标签： html css slideshow scaling

【解决方案1】：

只需将 max-width 添加到 #stage

#stage{
    max-width: 100%;
}

并将!important 放入图像max-width

#stage img {
    max-width: 100% !important
}

【讨论】：

谢谢。我尝试根据下面的代码添加您记下的内容。我是否有这个权利，因为它没有在幻灯片中做出改变。一旦浏览器窗口与它们的宽度一样小，图像仍然只会缩放。 #stage { 边距：1em 自动；宽度：1732px；高度：1080px；最大宽度：100%； } #stage img { 位置：绝对；最大宽度：100%；高度：自动；最大宽度：100% !important }