Untergrenze für Pixel mit Dezimalwert (nur Firefox) verlieren - html, css, html5, css3

Ich habe ein Image in einem Image-Div-Container. Ich vertikal und horizontal ausrichten. Aber wenn ich transform verwende, verliere ich den unteren Rand eines meiner Bilder und weiß nicht genau, warum.

html:

<div class="imageContainer">
<img class="myImage" src="/images/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%);
}

aktualisieren: Der Grund dafür ist, dass das Bild automatisch formatiert wirdLand auf einem Dezimalwert. (fx 9.2px) wird abgerundet. So wie ich es verstehe, wickelt es mein 9.2-Höhenelement in einen Rand ein und rundet es auf 9px ab, wodurch der untere Rand verschwindet. (sogar mit overflow: visible)

Jedenfalls Auto-Werte zu zwingen, nicht auf einem Dezimalwert zu landen? oder etwas in diese Richtung.

Geigenbeispiel: http://jsfiddle.net/dLLan/24/ (Das Problem tritt nur in Firefox auf. Stellen Sie daher sicher, dass Sie die Geige in Firefox ausführen.)

Antworten:

Da Sie Ihre Frage aktualisiert haben, habe ich Folgendes getan:
1. Neues div hinzugefügt (#imgholder) halten myImg div.
2. Das angepasste hinzugefügt Breite und Höhe von 20px und 25px auf #imgholder.
3. geändert Breite und Höhe von #myImage zu height: auto; & width: 100%; damit es sich bequem anpasst #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="/images/http://s7.postimg.org/k8e5116ff/806c278b5a0f77b98f4dcc469f2d0b08.jpg" />
</div>
</div>