Как сделать так, чтобы изображения в слайд-шоу масштабировались пропорционально при разных размерах окна просмотра? - PullRequest
Новая
       10

Как сделать так, чтобы изображения в слайд-шоу масштабировались пропорционально при разных размерах окна просмотра?

0 голосов
/ 06 января 2019

Я нашел код для слайд-шоу изображений, который мне действительно нравится, но не изменил размер при разных размерах браузера. Я попытался использовать свойство vh, чтобы это произошло, но это не сработало - я не мог пропорционально масштабировать изображения. Поэтому я попытался добавить свойства max-width: 100% и height: auto, которые пропорционально масштабируют изображения. Но происходит следующее:

  1. Только самое широкое изображение будет пропорционально масштабироваться во всех точках при изменении размера окна браузера по мере его уменьшения; остальные будут оставаться статичными до тех пор, пока окно браузера не станет равным ширине изображения, как определено указанными свойствами ширины и высоты.

  2. Изображения центрируются в окне браузера с измененным размером, если его ширина составляет 1732 пикселя (ширина самого широкого изображения и идентификатор «stage», содержащий изображения) или больше.

Есть ли способ уменьшить масштаб всех изображений при любом размере браузера? 

<!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 Ответ

0 голосов
/ 06 января 2019

Просто добавьте max-width к #stage

#stage{
    max-width: 100%;
}

и добавьте !important к изображениям max-width

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