दशमलव चौड़ाई मान (केवल फ़ायरफ़ॉक्स) के साथ पिक्सेल पर नीचे सीमा खोना - एचटीएमएल, सीएसएस, एचटीएमएल 5, सीएसएस 3

मैं एक छवि div कंटेनर के भीतर एक छवि है। मैं ऊर्ध्वाधर और क्षैतिज इसे संरेखित करता हूं। लेकिन जब मैं परिवर्तन का उपयोग कर रहा हूँ - मैं अपनी छवियों में से एक की निचली सीमा खो देता हूं, और मुझे यकीन नहीं है कि क्यों।

एचटीएमएल:

<div class="imageContainer">
<img class="myImage" src="/images/x">
</div>

सीएसएस:

.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%);
}

अद्यतन करें: इसका कारण यह है कि ऑटो आकार की छविएक दशमलव मान पर भूमि। (fx 9.2px) जो नीचे गोल है। इसलिए जैसा कि मैं इसे समझता हूं, यह मेरे 9.2 ऊंचाई वाले तत्व को एक सीमा में लपेटता है और फिर इसे 9px तक नीचे कर देता है जिससे नीचे की सीमा गायब हो जाती है। (भी साथ overflow: visible)

वैसे भी ऑटो वैल्यू को दशमलव मूल्य पर नहीं उतारने के लिए मजबूर करना? या उनके जैसे की कुछ और।

बेला उदाहरण: http://jsfiddle.net/dLLan/24/ (समस्या केवल फ़ायरफ़ॉक्स में होती है, इसलिए फ़ायरफ़ॉक्स में फ़िडेल को चलाना सुनिश्चित करें।)

उत्तर:

जब से आपने अपना प्रश्न अपडेट किया, यहाँ मैंने वही किया है:
1. एक नया जोड़ा गया (#imgholder) धारण करना myImg div।
2. अनुकूलित जोड़ा गया चौड़ाई तथा ऊंचाई का 20px तथा 25px पर #imgholder.
3. बदला हुआ चौड़ाई तथा ऊंचाई का #myImage सेवा मेरे height: auto; और width: 100%; इस पर फिट होने के लिए #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>