How to fix that Firefox renders Bootstrap Thumbnail differently than Google Chrome? - css

Question

Why does the latest Firefox browser render Bootstrap thumbnails differently than Google Chrome? I stuck with getting all thumbnails equal height but can't figure out how.
Setting the max-width attribute to none fixes the height, but lets the image overflow its parent container. Can you tell me why and how to fix so that it appears in all Browsers like it appears in Google Chrome?
Here is my fiddle.
EDIT: added screenshots (right-click -> 'open in new tab' to see fullsize)
Chrome: max-width = 100% (default) - fitting nicely
Chrome: max-width = none - overflowing parent
Firefox: max-width = 100% (default) - downscaled by BS
Firefox: max-width = none - overflowing parent

Answer 1

If your images height is fixed to 240px, than one of the solutions is to wrap them in absolute positioned span and use this css:
.thumbnails {
margin: 0 0 10px 0;
padding: 0;
}
.thumbnail {
position: relative;
height: 250px;
}
.thumbnail span {
margin: 0 auto;
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
overflow: hidden;
}
.thumbnail span img {
margin: 0 auto;
display: block;
}
Check it in this Fiddle, or run the snippet below:
.thumbnails {
margin: 0 0 10px 0;
padding: 0;
}
.thumbnail {
position: relative;
height: 250px;
}
.thumbnail span {
margin: 0 auto;
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
overflow: hidden;
}
.thumbnail span img {
margin: 0 auto;
display: block;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div id="slideshow">
<div>
<div>
<div data-index="1">
<ul class="thumbnails list-unstyled">
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/DONm5Ih.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/TFEAQTJ.jpg" class="shot portrait" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/WZbs0wI.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>