Bootstrap Column Content Centering and Absolute Positioning - twitter-bootstrap-3

Question

I have a bootstrap row that has 3 columns. The columns display horizontally in everything except mobile. In mobile they stack vertically, which is what I want... here's the issue.
I have responsive (img-responsive) images within each of the 3 columns. In the mobile display, I want the images to be centered within the column. On top of that I need to have 2 div's with absolute positioning over the responsive images. It works fine in chrome, but in I.E. and FireFox, the images are not responsive due to the outer div which has display:inline-block.
Here's the code:
<div class="row">
<div class="col-md-4 col-sm-6" style="text-align:center;">
<div style="margin-bottom:15px;position:relative;display: inline-block;">
<div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
Live Deal
</div>
<img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
<div class="deal2Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
</div>
</div>
<div class="col-md-4 col-sm-6" style="text-align:center;">
<div style="margin-bottom:15px;position:relative;display: inline-block;">
<div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
Live Deal
</div>
<img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
<div class="deal3Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
</div>
</div>
<div class="col-md-4 col-sm-6" style="text-align:center;">
<div style="margin-bottom:15px;position:relative;display: inline-block;">
<div style="position:absolute;top:0;right:0;padding:5px;font-weight:bold;background-color:#bb091f;color:#FFF;">
Live Deal
</div>
<img class="img-responsive" style="border:solid 1px #666;display:inline-block !important;" src="http://www.weekesisland.com/photos/atv.jpg" />
<div class="deal4Timer" style="position:absolute;bottom:1px;right:1px;width:190px;opacity:.9;"></div>
</div>
</div>
</div>
And here's how it looks in chrome vs. firefox.
Chrome desktop:
Chrome mobile:
In mobile, when the windows width is smaller than the image, the image scales due to img-responsive.
Firefox desktop:
Firefox Mobile
Note how the firefox images are no longer responsive.... however it is centered in the column in the mobile display, and the absolute positioning of the 2 div's is correct.
Is there any way to accomplish this that is cross-browser compatible? I've tried a bunch of options, but without inline-block, I can't get the absolute elements positioned properly on the responsive image as well as centered in the column for the mobile display.

Answer 1

To get better results as responsive images, I use jQuery.
You should try something like : example jQuery reponsive image with CODEPEN link

Answer 2

Here's what I did to fix it... it was simpler than I thought:
<div class="col-md-4 col-sm-6" style="text-align:center;">
<div class="homeLiveDealMobile">
<div class="liveDealBlock">
Live Deal
</div>
<img class="img-responsive imgBorder" src="http://www.weekesisland.com/photos/atv.jpg" />
<div class="deal3Timer homepageTimer"></div>
</div>
</div>
CSS:
.liveDealBlock {
position:absolute;
top:0;
right:0;
padding:5px;
font-weight:bold;
background-color:#bb091f;
color:#FFF;
}
.homeLiveDealMobile {
margin-bottom:15px !important;
position:relative;
}
.homepageTimer {
position:absolute;
bottom:1px;
right:1px;
width:190px;
opacity:.9;
}
#media(max-width:767px){
.homeLiveDealMobile {
max-width:391px !important;
margin:auto;
}
}