JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation-area">
    <div id="navigation">
    </div>
</div>

<div id="set-overflow">
    <img src="/img/logo.png" class="resize">
</div>

CSS

/*------------------------------*/
* {
    margin: 0;
    padding: 0;
}
#navigation {
    width:990px;
    border:1px solid green;
    margin:23px auto;
    height:42px;
}
#navigation-area {
    width:100%;
    height:135px;
    background:url(images/bg-navigation.png) top center no-repeat;
    overflow:hidden;
    position:absolute;
    top:-3px;
    left:50%;
    margin-left:-50%;
    z-index:50;
}
#set-overflow {
    overflow:hidden;
    width:100%;
    height:100%;
    border:1px solid red;
    position:absolute;
    z-index:20;
}
.resize {
    margin-left:auto;
    margin-right:auto;
}

JavaScript

function imageresize() {
    var h = $(window).height();
    var w = $(window).width();
    var conHeight = h * 0.56;
    
    // set large-image container to 56% of window height
    $(".resize").css({'height' : conHeight + 'px'});
        
    var left = (w - $('#set-overflow img').width())/2;
    $('#set-overflow img').css('margin-left', left + 'px');
}
$(document).ready(function() {
  imageresize();
});

$(window).resize(function() {
  imageresize();
});