Image 100% height error inside table in Chrome and Safari - html

Question

I tried pretty hard to find the answer to this on here, on google, and elsewhere, but it seems pretty obscure. I had to do some fancy CSS in order to create a box with a specific aspect ratio inside which a thumbnail would be centered vertically and horizontally. Those are straight-forward ideas that are actually somewhat complicated to implement in CSS. My solution works great everywhere except inside a table in Chrome with an image that has dimensions larger than the container.
Here is code that demonstrates the issue:
/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio:after {
padding-top: 76.19%;
display: block;
content: '';
}
/*
parent has no height, this fills the container's space
*/
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
/*
centers image horizontally and vertically
background color
*/
.image-background {
text-align: center;
background-color: #444;
height: 100%;
width: 100%;
}
.image-background::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
img {
display: inline-block;
padding: 5px;
box-sizing: border-box;
vertical-align: middle;
}
/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
height: 100%;
}
.fill-width {
width: 100%;
}
/* other styles */
h1, h2, h3 {
text-align: center;
}
table {
width: 100%;
}
.thumbnail-viewer {
width: 40%;
margin: 10px auto;
}
<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
Hopefully as you can see, in Chrome (I'm using 43.0.2357.132 64-bit) and Safari (8.0.7) the tall/large image is exceeding the boundaries of its parent and its height is being set to the natural height of the image. The wide images all work as expected, so this appears to only be an issue of height.
My question: What is a simple or straight-forward way to fix this issue in Chrome and Safari? Or is it a bug and should I look for a less-than-ideal work-around that makes it look less terrible? What is causing this issue?
Thanks!

Answer 1

FYI, on smaller screens (screenwidth < 650px), your first image inside the table breaks as well.
To fix it, change your img to use the absolute positioning centering trick:
img {
padding: 5px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This also means you don't need the image-background::before declaration.

Answer 2

Why do you need .fill-container to have absolute positioning? If I remove the lines below from styles then everything looks fine in Chrome (I can't test in Safari):
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
You also haven't closed img tags, you have
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
instead of (notice /> at the end of line)
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />