使用100％高度时图像应该是多大？

我有这个卷轴与多个图像都在一个高度：100％包装。但为了正确显示并使用正确的宽高比，我的图像应该达到什么样的高度？宽度固定为400px。使用100％高度时图像应该是多大？

任何人都可以帮助我吗？小提琴这里：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); 

    }); 

});

谢谢！

来源

2016-09-17 GetGalax

这样你的意思是，填补了视口的高度？ https://jsfiddle.net/45f4jztd/1/ – LGSon

这一个没有滚动︰https://jsfiddle.net/45f4jztd/2/ – LGSon

Yeap！谢谢LGSon！ – GetGalax

您将图像高度设置为其父项的100％，或者如我的示例中那样，视口使用vh，宽度设置为自动。

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>

来源

2016-09-22 19:05:47 LGSon

使用100％高度时图像应该是多大？

回答

相关问题