使用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％高度時圖像應該是多大？

回答

相關問題