CSS：固定为视口高度的元素，按比例缩放，居中

Question

我的元素设置高度为100％视口高度。其中的背景图像也固定在相同的高度 - 因此图像的顶部和底部始终可见，它居中，有时它的边缘会被切断。 / p>

我尝试在此基础上添加的另一个元素与背景图像的相同行为相匹配（将其他内容放在图像上，但确保它们始终排成一行）。

我有一个使用Javascript的工作示例，但想知道是否可以使用CSS复制相同的行为。粉红色框是我根据视口大小缩放的元素，它应始终与其背后的背景图像匹配。

https://jsfiddle.net/louiswalch/p1rkohzt/

所有缩放逻辑如下：

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');