JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "wrapper">
        <div class = "main">
    </div>

CSS

html, body {
     height: 100%;
     width: 100%;    
    }
    
    .wrapper {
        width: 50%;
        height: 100%;
        position: relative;
    }
    .wrapper:after {
        padding-top: 150%; /*this specifies the aspect ratio*/
        display: block;
        content: '';
    }
    
    .main {
        position: absolute;
        top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
        background: url(http://placekitten.com/g/400/600) no-repeat center center;
        background-size: contain;
        border: 1px solid red;
    }