Bild vertikale Höhe in absoluten div

Question

Ich versuche, meine eigenen Leuchtkasten, zu erstellen und jetzt bin ich auf Designteil stecken, ich habe Manager Gleitkastens mit horizontal ansprechendem Bild zu erzeugen, wie ich

will

<div class="gallery"> 
    <div class="container"> 
     <span class="centerer"></span> 
     <div> 
      <img src="http://images.car.bauercdn.com/pagefiles/18474/bmw_7-series_05.jpg"> 
     </div> 
    </div> 
    <a class="arrow left" href="#"> 
     <span class="centerer"></span> 
     <img src="http://i.imgur.com/GbeQojB.png" /> 
    </a> 
    <a class="arrow right" href="#"> 
     <span class="centerer"></span> 
     <img src="http://i.imgur.com/GbeQojB.png" /> 
    </a> 
</div> 

_

a { 
    text-decoration: none; 
} 

.gallery { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: #333; 
} 

.container { 
    width:80%; 
    height:100%; 
    position:absolute; 
    left:10%; 
    text-align: center; 
} 

.container div { 
    display:inline-block; 
    width:95%; 
} 

.centerer { 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 

img { 
    vertical-align: middle; 
    display: inline-block; 
    max-width: 100%; 
    max-height: 100%; 
} 

.arrow { 
    width:10%; 
    height:100%; 
    display:block; 
    position:fixed; 
    text-align: center; 
} 

.arrow img { 
    display:inline-block; 
    opacity:0.5; 
    width:50%; 
} 

.arrow:hover img { 
    opacity:1; 
} 

.arrow.left { 
    transform: rotate(180deg); 
    left:0; 
} 

.arrow.right { 
    right:0; 
} 

https://jsfiddle.net/4zpk43f2/

, aber wenn ich es mit vertikalen Foto verwenden, ist es ... saugt. Ich habe versucht, einige Anzeigeeinstellungen zu ändern, aber es ist oder gut für die vertikale oder gut für horizontal.

https://jsfiddle.net/d470vkc9/1/

Answer 1

in Ihrem Code begrenzt Sie die Breite des Bildes zu 80% von width: 80% zum .container Anwendung. und Sie gaben height: 100% zu demselben. Deshalb dehnte sich das Bild vertikal aus. Erwähnen Sie Höhe auch als 80% wie Sie die .container getan haben.

Versuchen Sie folgendes:

.container { 
    height: 80%; 
    top: 10%; 
    /* other styles */ 
} 

.container > div { 
    height: 100%; /* or less as you prefer */ 
} 

Working Fiddle