Как убрать пробел вокруг изображения в div и таблице, который появляется при уменьшении изображения?

Question

Как я могу удалить ненужное пространство над и под изображениями в элементах div и table, которые появляются при уменьшении изображений?В остальном я доволен поведением моих изображений: они уменьшаются, а соотношение сторон не меняется.

Мой вопрос похож на У меня есть нежелательное пространство вокруг изображений в моем адаптивном слайдере, когда мое изображениесжимается , но тот не получил никаких полезных ответов.Хотя мой вопрос может быть проще.

Исходная веб-страница здесь .

Сниппер ниже.Вот JSFiddle , если это более удобно.

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;
}

Answer 2

вам просто нужно добавить 2 атрибута в табличный тег cellspacing = "0" и cellpadding = "0" или добавить ниже css для удаления пробела

table{
    border-spacing: 0;
}

td {
    padding: 0;
}

и вы установите height="450px" и height="250", просто удалите его, всегда сохраняйте автоматическую высоту в адаптивном макете.

проверь свою скрипку я там обновился.

<table style="max-width:90%; border:5px solid #000000;" cellspacing="0" cellpadding="0">