Navigation arrow over image - html

Question

I'm trying to add navigation (Left - Right) arrows on the center of image.
But somehow I don't have images of fixed sizes. They can be of any height and width.
Here is what I tried http://jsfiddle.net/vh1fp0k0/
#case-example-cover {
width: 100%;
height: 100%;
}
#nav-container {
position: relative;
border: 1px solid red;
}
#nav-container div {
position: absolute;
top: -webkit-calc(50% - 19px);
top: -moz-calc(50% - 19px);
top: -ms-calc(50% - 19px);
top: calc(50% - 19px);
width: 38px;
height: 38px;
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
border: 1px solid blue;
}
#case-left {
left: 0;
}
#case-right {
right: 0;
}
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/200x299" />
</div>
</div>
<br>
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/400x400" />
</div>
</div>
Desired result
How to do achieve this ?

Answer 1

If you make the #case-example-cover div inline-block it shrink wraps to the image size.
JSfiddle Demo
#case-example-cover {
display: inline-block;
}
#nav-container {
position: relative;
border: 1px solid red;
}
#nav-container img {
display: block;
}
#nav-container div {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
border: 1px solid blue;
}
#case-left {
left: 0;
}
#case-right {
right: 0;
}
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/200x299" />
</div>
</div>
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/400x400" />
</div>
</div>