当使用100%高度时，图像应该是什么大小?

What size should images be when using 100% height?

本文关键字：是什么 图像 100% 高度      更新时间：2023-09-26

我有一个滚动条，上面有多个图像，它们都在一个高度为100%的包装器中。但是，我的图像应该是什么高度才能正确显示和正确的宽高比?宽度固定为400px。

谁能帮我一下?点击这里: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);
    });
});

谢谢!

您将图像的高度设置为其父级的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>

相关文章：