JSFiddle - React, Tailwind, and code Playground

HTML

<div class="entry-content">
  <div class="banner"></div>
</div>

CSS

.entry-content {
    max-width: 1300px;
    width: 100%;
    padding: 0 20px 0 20px;
}
.banner {
    margin: 0 -20px 0 -20px;
    max-width: 1300px;
    height: 300px;
    background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
    background-position: 0 -900px;
    background-size:100% auto;
}

JavaScript

$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});