保持纵横比而不会消除多余的滚动

Question

我正在尝试让主图像（大象）在缩小浏览器窗口时保持3：2的宽高比。问题是，如果你在全屏幕上打开演示并开始收缩浏览器，那么主图像将会失去3：2的宽高比，因为它会尝试摆脱多余的y滚动首先是图像大拇指。我希望它不要试图摆脱垂直滚动，而是保持主图像3：2的宽高比。

实际上可以达到这个目的吗？请注意，每张图片都有3：2的宽高比，需要保留。

我很想知道人们在这里的想法。谢谢！

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  display: flex;
    max-width: 800px;
}
#details-wrap {
  width: 100%;
  height: 325px;
  float: left;
  text-align: right;
  position: relative;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  display: block;
  width: 100%;
  margin: 0;
    max-height: 400px;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: scroll;
    max-height: 400px;
  /* make it only scroll when exceeds height of main image */
  /* max-height: 400px;  make this the height of #main-image */
}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  height: auto;
  width: 100%;
  /* padding-bottom: 66.6666666666666%; */
}
canvas {
  display: block;
  width: 100%;
  background-position: center;
  background-size: cover;
  margin-bottom: 6px;
}
.image-thumb:last-of-type {
  margin-bottom: 0;
}

<div id="images-wrap">
  <canvas id="main-image" style="background-image: url('http://elephant-family.org/wp-content/uploads/2015/06/shutterstock_77217466.jpg')" width="3" height="2"></canvas>
  <div id="image-thumbs">
    <canvas class="image-thumb" onmouseover="" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')" width=3 height=2></canvas>
    <canvas class="image-thumb" onmouseover="" style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')" width=3 height=2></canvas>
    <script>
      // hides overflow scroll if less than 5 thumbs
      var thumbs = document.getElementsByClassName('image-thumb');
      var thumbsWrap = document.getElementById('image-thumbs');
      if (thumbs.length < 5) {
        thumbsWrap.style.overflow = 'hidden';
      }
    </script>
    <script>
      // makes '#image-thumbs' not exceed the height of '#main-image'
      var mainImgHeight = document.getElementById('main-image-sizer').style.height;
      var imageThumbsInitialHeight = document.getElementById('image-thumbs').style.height;
      if (imageThumbsInitialHeight > mainImgHeight) {
        document.getElementById('image-thumbs').style.height = mainImgHeight;
      }
    </script>
  </div>
</div>