Object Fitter — Test element against an aspect ratio, depending on result add handy attribute to elements

object-fitter.js

var iselement = require('is-element')

module.exports = function(opts) {

  var testRatio
  
  if (iselement(opts.tester)) {
    testRatio = opts.tester.clientHeight / opts.tester.clientWidth
  } else {
    testRatio = window.innerHeight / window.innerWidth
  }

  if (testRatio <= opts.ratio) {
    [].forEach.call(opts.fitters, function(v, i) {
      v.setAttribute('data-fit', 'width')
    })
  } else {
    [].forEach.call(opts.fitters, function(v, i) {
      v.setAttribute('data-fit', 'height')
    })
  }

}

style.css

[data-fit] {
  position: relative;
}
[data-fit] img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-fit="height"] img {
  height: 100%;
  width: auto;
}
[data-fit="width"] img {
  width: 100%;
  height: auto;
}

usage.js

var fitter = require('./object-fitter')

fitter({
  'tester' : document.querySelector('[data-fit]'), 
  'fitters' : document.querySelectorAll('[data-fit]'),
  'ratio' : 9/16
})

/**
 * If the aspect ratio of the first [data-fit] element is less
 * than 9/16 data-fit="width" will be set on all [data-fit] elements, 
 * otherwise data-fit="height" will be set. You can then use css to
 * get images/videos to cover/contain the [data-fit] elements easily.
 * /