JSFiddle - React, Tailwind, and code Playground

HTML

<nav>Nav</nav>
<main>
    <section class="container">
        <div class="text"><p>title</p></div>
        <div class="image">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg">
        </div>
    </section>

    <section class="container">
        <div class="text"><p>hello</p></div>
        <div class="image">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg">
        </div>
    </section>
</main>

CSS

nav {
    position:fixed;
    background:grey;
    width:100%;
    height: 100px;
}

main {
  padding-top: 100px;
}

.container {
    display:flex;
    flex-flow: column nowrap;
    height: calc(100vh - 100px);
    background: green;
    border: 3px solid brown;
}

.text { background: yellow; }


/* ***** NEW ***** */
.image {
  display: flex;
  justify-content: center;
  height: 100%;
} 
img {
  width: 100%;
  object-fit: contain;
}