Focus (Point) Vanilla JS

// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function() {
  'use strict';
  // initialize focus object
  function Focus (img) {
    this.img = img; // image
    this.wrapper = img.parentNode; // frame
    this.width = this.wrapper.offsetWidth; // frame width
    this.height = this.wrapper.offsetHeight; // frame height
    this.x = .50; // center
    this.y = .50; // center
    if (!this.wrapper.classList.contains('contain')) {
      // overwrite focus x coortinate else center
      if (this.img.getAttribute('data-focus-x')) {
        this.x = parseInt(img.getAttribute('data-focus-x')) / 100;
      }
      // overwrite focus y coordinate else center
      if (this.img.getAttribute('data-focus-y')) {
        this.y = parseInt(img.getAttribute('data-focus-y')) / 100;
      }
    }
    // frame must have position attribute for focused content
    if (!this.wrapper.style.position) {
      this.wrapper.style.position = 'relative';
    }
    // image must have a absolute position
    img.style.position = 'absolute';
    img.style.maxWidth = 'none';
    this.align();
  }
  Focus.prototype = {
    // concept: depending on the aspect ratio and the type of filling of the frame
    // one side adapts to the frame and the other side is cut off or has a stub
    align: function () {
      var scaled, value;
      if (!this.wrapper.classList.contains('contain') === ((this.img.width / this.img.height) >= (this.width / this.height))) {
        this.img.style.width = 'auto';
        this.img.style.height = '100%';
        this.img.style.top = '0';
        scaled = this.img.width * (this.img.height / this.height);
        value = - Math.floor((scaled * this.x) - (this.width / 2));
        if (!this.wrapper.classList.contains('contain')) {
          if (value > 0) {
            value = 0;
          } else if (value < this.width - scaled) {
            value = Math.floor(this.width - scaled);
          }
        }
        this.img.style.left = value + 'px';
      } else {
        this.img.style.width = '100%';
        this.img.style.height = 'auto';
        this.img.style.left = '0';
        scaled = this.img.height * (this.img.width / this.width);
        value = - Math.floor((scaled * this.y) - (this.height / 2));
        if (!this.wrapper.classList.contains('contain')) {
          if (value > 0) {
            value = 0;
          } else if (value < (this.height - scaled)) {
            value = Math.floor(this.height - scaled);
          }
        }
        this.img.style.top = value + 'px';
      }
    },
    // on resizing the window the resonsive website could results in changing the frame size
    resize: function () {
      if ((this.width != this.wrapper.offsetWidth) || (this.height != this.wrapper.offsetHeight)) {
        this.width = this.wrapper.offsetWidth;
        this.height = this.wrapper.offsetHeight;
        this.align();
      }
    }
  };

  // get all images on page
  var i, els = document.getElementsByTagName("img"), len = els.length;
  for (i = 0; i < len; i++) {
    // add a on load eventlistener to set the focus if the class list contains "focus"
    // this don't breaks lazy loading
    if (els[i].classList.contains("focus")) {
      if (!els[i].complete || (els[i].naturalWidth === 0)) {
        els[i].addEventListener("load", function (e) {
          var focus = new Focus(this);
          window.addEventListener('resize', function () { focus.resize(); });
          focus.resize();
        }, false);
      } else {
        var focus = new Focus(els[i]);
        window.addEventListener('resize', function () { focus.resize(); });
        focus.resize();
      }
    }
  }
})();