javascript - 使用 100% 高度时图像的尺寸应该是多少？

Question

我有一个带有多个图像的滚动条，这些图像都位于 height:100% 包装器内。但是我的图像应该有多高才能正确显示并具有正确的宽高比？宽度固定为 400px。

谁能帮帮我？在这里 fiddle :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);

    });

});

谢谢!

Answer 1

您将图像高度设置为其父级的 100%，或者如我的示例中所示，设置视口(viewport)的 100%，此处使用 vh，并将其宽度设置为 auto。

  height: 100vh;
  width: auto;

示例片段

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>