代码之家 › 专栏 › 技术社区 › Barton Lewis

如何使幻灯片图像在不同的视口大小下按比例缩放?

scaling slideshow css html

Barton Lewis · 技术社区 · 6 年前

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

当您缩小浏览器窗口的大小时,只有最宽的图像在所有点上都会按比例缩放;其他图像将保持静态,直到浏览器窗口等于由指定的宽度和高度属性定义的图像宽度为止。

有没有一种方法可以使所有的图像在所有浏览器大小下都缩小?

<!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>

1 回复 | 直到 6 年前

Mohamed hesham 6 年前

只需将最大宽度添加到 #stage

#stage{
    max-width: 100%;
}

!important 到图像 max-width

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