Image vertical height in absolute div - html

Question

I am trying to create my own lightbox, and now i am stuck on design part, i've manager to create slide box with horizontal responsive image as i want
<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/
, but when i use it with vertical photo, it ... sucks.
I've tried to change some display settings, but it's or good for vertical, or good for horizontal.
https://jsfiddle.net/d470vkc9/1/

Answer 1

In your code, you limited the width of the image to 80% by applying width: 80% to the .container. and you gave height: 100% to the same. That is why the image was stretching to full, vertically. Mention height also as 80% as you did to the .container.
Try this:
.container {
height: 80%;
top: 10%;
/* other styles */
}
.container > div {
height: 100%; /* or less as you prefer */
}
Working Fiddle