CZ-Ratio jQuery Plugin

Set (user defined) ratio for an element, based on its width, height, shorter or longer side.

by Mirza Mašić

HTML

<div class="test">
  Element 1
</div>

<div class="test" style="margin-top: 20px;">
  Element 2
</div>

CSS

body {
  background-color: #262932;
}

.test {
  background-color: white;
  padding: 15px;
}

JavaScript

(function($) {
  $.fn.CZRatio = function(options) {
    // Default options
    let settings = $.extend({
      ratio: '',
      keep: 'w'
    }, options);

    this.each(function() {
      let _this = $(this);
      // Check if ratio parameter is in right format
      if (!RegExp(/^\d+-\d+$/).test(settings.ratio)) {
        throw 'CZR ERROR: Ratio parameter in wrong format, it should be in "#-#" format.'
      } else {
        let R = settings.ratio.split('-');
        let K = settings.keep;
        // Checking which side is longer
        if (K === 'l' || K === 'L') {
          K = _this.height() > _this.width() ? 'h' : 'w';
        }
        // Checking which side is shorter
        else if (K === 's' || K === 'S') {
          K = _this.height() > _this.width() ? 'w' : 'h';
        }

        // Calculating height or width, depending on keep parameter
        switch (K) {
          case 'w':
          case 'W':
            _this.height(_this.width() * (R[1] / R[0]));
            break;
          case 'h':
          case 'H':
            _this.width(_this.height() * (R[0] / R[1]));
            break;
          default:
            throw 'CZR ERROR: Wrong parameter keep see the documentation.';
        }
      }
    });
  }
}(jQuery));

$('.test').CZRatio({
  ratio: '16-9'
});