JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div class="wrap">
    <main id="main">

    </main>
    <div>another div</div>
</div>

CSS

html,body{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.wrap{
	position: relative;
	z-index: auto;
	width: 100%;
	max-width: 960px;
	height: 100%;
	margin: 0 auto;
}
#main{
	width: 100%;
	height: 70%;
	border: 1px solid red;
}
main{
	max-width: 100%;
	height: 100%;
	background: url(http://placehold.it/400x350.jpg) no-repeat top center;
	background-size: contain;
}

JavaScript

var
    main = $('#main'),
    imgSrc = main.css('background-image').slice(4, -1);

$('<img />')
    .attr('src', imgSrc)
    .on('load', function() {
        main.height(this.height);
    });