Cycle through different sized images on scroll

Hi all,
I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
- to be able to have images of different heights and widths, not all the same size (as it is now).
- vertically/horizontally centered.

Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/

Thanks!

HTML:

<div id="contentwrapper">
      <div class="centreme">
        <img src="https://picsum.photos/200/200?image=1" id="animation" />
        <img class="hidden" src="https://picsum.photos/200/200?image=1" />
        <img class="hidden" src="https://picsum.photos/200/200?image=2" />
        <img class="hidden" src="https://picsum.photos/200/200?image=3" />
        <img class="hidden" src="https://picsum.photos/200/200?image=4" />
        <img class="hidden" src="https://picsum.photos/200/200?image=5" />
        <div id="bottommark"></div>
      </div>
    </div>

HTML:

CSS:

body,
      html {
        height: 7000px;
        margin: 0;
        background-color: grey;
      }

      .hidden {
        position: absolute;
        top: -9999999px
      }

      #bottommark {
        position: absolute;
        bottom: 0;
      }

      #contentwrapper {
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .centreme {
        position: fixed;
        width: 200px;
        /* the image width */
        height: 200px;
        /* the image height */
        top: 50%;
        left: 50%;
        margin-top: -100px;
        /* half the image height */
        margin-left: -100px;
        /* half the image width */
      }

Code (CSS):

JS:

$(document).ready(function() {
        var a = $(document).height();
        var b = a - $("#bottommark").position().top;
        $(window).scroll(function() {
          var e = $(document).height();
          var f = $(window).scrollTop();
          var c = e - $("#bottommark").position().top - f;
          var d = b / 5;
          $("span").html(c);
          if (c > d * 4) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
          }
          if ((c < d * 4) && (c > d * 3)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
          }
          if ((c < d * 3) && (c > d * 2)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
          }
          if (c < d * 2 && c > d * 1) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
          if (c < d) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }
        })
      });

Code (JavaScript):

 

here's the answer over at https://stackoverflow.com/questions/51181051/cycle-through-different-sized-images-on-scroll/51181849#51181849