JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

CSS

#hungry {
    background:url('http://i.stack.imgur.com/7xasp.jpg') no-repeat center center;
    background-size:cover;
    width:100%;
}
#hungry p {
    color:#fff;
}

JavaScript

// you know the size for your image
	imageWidth = 1919;
	imageHeight = 761;
	imageProportion = imageHeight / imageWidth;

	function resizeJumbo() {
	    $("#hungry").css({
	        height: $(window).width() * imageProportion
	    });
	}

	$(window).on("resize", function () {
	    resizeJumbo();
	});

	$(document).ready(function () {
	    resizeJumbo();
	});