JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
    <div class="navbar">
        <div id="home"></div>
    </div>
</div>

CSS

html, body {
    background: #000;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}
.bg {
    height: 100%;
    background-image: url('https://placekitten.com/350/325');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}
.navbar {
    position: relative;
    width: 100%;
    height: 14%;
    top: 75%;
    margin: 0 auto;
    border: 1px solid red;
}
#home {
    position: absolute;
    top: 0;
    left: 21.5%;
    width: 7%;
    height: 100%;
    display: block;
    border: 1px solid green;
}

JavaScript

$(window).on("resize", function() {
    
    var width = $('.bg').width();
    var height = $('.bg').height();
   
    var imgWidth = width > height ? 350/325 * height : width;
    var imgHeight = height > width ? 325/350 * width : height;
    var imgTop;
    
    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
    });
       
});