What size should images be when using 100% height?

Question

I have this scroller with multiple images that are all inside a height:100% wrapper. But what height should my image be in order to display properly and with the correct aspect ratio? Width is fixed to 400px.

Anyone can help me out? Fiddle here: https://jsfiddle.net/45f4jztd/

HTML:

    <div id="parent">
    <div id="propertyThumbnails">

        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />
        <img src="https://placebear.com/400/1300" />

    </div>
</div>

CSS:

#parent{
  position:relative;
  margin:0 auto;
  height: 100%;
  width: 100%;
  background: #ddd;
}
#propertyThumbnails{
  position:relative;
  overflow:hidden;
  background:#444;
  width:100%;
  height:100%;
  white-space:nowrap;
}
#propertyThumbnails img{
  vertical-align: middle;
  height: 100%;
  width:400px;
  display:inline;
  margin-left:-4px;
}

JavaScript:

$(function(){

    $(window).load(function(){

        var $gal   = $("#propertyThumbnails"),
            galW   = $gal.outerWidth(true),
            galSW  = $gal[0].scrollWidth,
            wDiff  = (galSW/galW)-1,  // widths difference ratio
            mPadd  = 60,  // Mousemove Padding
            damp   = 20,  // Mousemove response softness
            mX     = 0,   // Real mouse position
            mX2    = 0,   // Modified mouse position
            posX   = 0,
            mmAA   = galW-(mPadd*2), // The mousemove available area
            mmAAr  = (galW/mmAA);    // get available mousemove fidderence ratio

        $gal.mousemove(function(e) {
            mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
            mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
        });

        setInterval(function(){
            posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"    
            $gal.scrollLeft(posX*wDiff);
        }, 10);

    });

});

Thanks!

Answer 1

You set the images height to 100% of its parent, or as in my sample, the viewport, here using vh, and its width to auto.

  height: 100vh;
  width: auto;

Sample snippet

html,
body {
  margin: 0;
}
#parent {
  position: relative;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  background: #ddd;
}
#propertyThumbnails {
  position: relative;
  overflow: hidden;
  background: #444;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
#propertyThumbnails img {
  vertical-align: middle;
  height: 100vh;
  width: auto;
  display: inline;
  margin-left: -4px;
}

<div id="parent">
  <div id="propertyThumbnails">

    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />
    <img src="https://placebear.com/400/1300" />

  </div>
</div>