Welche Größe sollten Bilder bei Verwendung von 100% Höhe sein?

Question

Ich habe dieses Scroller mit mehreren Bildern, die alle in einer Höhe sind: 100% Wrapper. Aber wie hoch soll mein Bild sein, damit es korrekt und mit dem richtigen Seitenverhältnis angezeigt wird? Die Breite ist auf 400 px festgelegt.

Kann mir jemand helfen? Fiddle hier: 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); 

    }); 

}); 

Dank!

Answer 1

Sie legen die Bildhöhe auf 100% des übergeordneten Elements oder, wie in meinem Beispiel, im Ansichtsfenster fest, hier vh, und die Breite auf auto.

height: 100vh; 
    width: auto; 

Beispiel Schnipsel

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>