JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <header><h1>Title</h1></header>
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
</div>

CSS

.item {
    height: 70vh;
    display:inline-block;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 512px;
}

.item header {
    display: block;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.item header h1 {
    margin: 0 0 0 0.2em;
}

.item img {
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.fix img {
    height: calc(100% - 38px)    
}