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

.item header {
    display: block;
    height: 7%;
}

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

.item img {
    height: 93%
}

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