How to remove a gap around the image in div and table that appears when the image shrinks?

Question

How could I remove the unwanted space above and below the images in div and table elements that appear when the images shrink? I am otherwise happy with the behaviour of my images: they shrink, and the aspect ratio does not change.

My question is similar to I have unwanted space around the images in my responsive slider when my image shrinks, but that one did not get any helpful answers. My question might be simpler though.

The original webpage is here.

The snipper is below. Here is the JSFiddle, if it is more convenient.

img {
object-fit: contain;
max-width:90%; 
height: 450px;
}

html, body {
margin:0;
padding:0;
}

table, div {
  max-width:90%; 
  border:5px solid #000000;
}

table{
border-spacing: 0;
}

td {
padding: 0;
}

<table>
<tbody>
<tr><td>Typical Behaviour</td><td><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/Gorillas_fight_over_a_tomato.jpg" /></td><td><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/Tamarin_GoldenLion.jpg" /></td></tr>
</tbody>
</table>
***
<div><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/GrandBudapestHote.jpg" /><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/JB.jpeg" /></div>

Answer 1

img {
object-fit: contain;
max-width:90%; 
max-height: 450px;
}