JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

<section>
  <div class="content">
    <div class="test_center">1</div>
  </div>
</section>
<section>
  <div class="content">
    <div class="test_center">2</div>
  </div>
</section>

CSS

BODY {
  background-color: white;
}
MAIN {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
SECTION {
  height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 50% 50%;
  background-image: url('https://s33.postimg.org/lb6oa6v5b/background_scale_reference.png');
}
.content {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  z-index: 1;
  left: 50%;
  background-color: rgba(255, 0, 0, 0.2);
}
.test_center {
  width: 50%;
  padding: 30px 0;
  font-size: 20px;
  color: white;
  font-weight: bold;
  background-color: red;
  text-align: right;
}

JavaScript

var $window 				= $(window);

var base_width 			= 1600;
var base_height 		= 960;
var base_ratio 			= (base_width / base_height);

var contents 				= $('SECTION .content');

$window.on('resize', function() {

  var window_width    = $window.width();
  var window_height   = $window.height();
  var window_ratio    = (window_height / window_height);

	var scaled_width    = (window_height * 100/base_height) * base_width/100;

  contents.css({
	  width: (scaled_width+'px'), 
  	height: (window_height+'px'), 
  	marginLeft: ('-'+scaled_width/2+'px'), 
  });

}).trigger('resize');