Как ограничить изображение на высоту ее родительской ячейки сетки? ⇐ Html

[Anonymous]

У меня есть простой макет страницы, который я хочу понять. В пределах одной из ячейки сетки мне нужен тег IMG , который изменяется, чтобы соответствовать максимальной высоте содержащей ячейки сетки. К сожалению, я не смог сделать это в течение двух дней. Мое изображение всегда оказывается большим, вызывая полосы прокрутки и/или мою сетку переполнена.
У меня есть жесткое требование, чтобы сохранить все на странице внутри Viewport (100vh)
Это моя версия с использованием фонового image, который демонстрирует поведение, которое я хочу: https://jsfiddle.net/9l2x6d7t/6. Идеально изменяйте размер, если я сделаю свой просмотр выше или короче. Я не смог сделать это с помощью IMG
может кто -нибудь помочь?

Подробнее здесь: https://stackoverflow.com/questions/747 ... -grid-cell