losing bottom border on pixel with decimal width value (firefox only) - html

Question

I have an image within an image div container. I vertical and horizontal align it. But when i do so using transform - i lose the bottom border of one of my images, and am not quite sure why.
html:
<div class="imageContainer">
<img class="myImage" src='x'>
</div>
css:
.imageContainer {
width: 20px;
max-height: 25px;
height: 25px;
position: relative;
background-color: lightblue;
}
.myImage {
width: auto;
height: auto; /* Set to 9.2px in fiddle example to force the problem. */
max-height: 25px;
max-width: 20px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
update:
The reason for this is that the auto sized image land on a decimal value. (fx 9.2px) which is rounded down. So as I understand it, it wraps my 9.2 height element in a border and then rounds it down to 9px which makes the bottom border vanish. (even with overflow: visible)
Anyway to force auto values not to land on a decimal value? or something along those lines.
fiddle example : http://jsfiddle.net/dLLan/24/ (the problem only happens in firefox, so make sure to run the fiddle in firefox.)

Answer 1

Since you updated your question, here is what I did:
1. Added a new div (#imgholder) to hold the myImg div.
2. Added the customized width and height of 20px and 25px on #imgholder.
3. Changed width and height of #myImage to height: auto; & width: 100%; to make it fit comfy on #imgholder.
#imageContainer {
float: left;
position: relative;
background-color: lightblue;
}
#imgholder {
width: 20px;
height: 25px;
}
#myImage {
height: auto;
width: 100%;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="imageContainer">
<div id="imgholder">
<img id="myImage" src="http://s7.postimg.org/k8e5116ff/806c278b5a0f77b98f4dcc469f2d0b08.jpg" />
</div>
</div>