shido.proportional.js/dist/js/proportional.min.js

It helps create proportional elements such as squares and rectangles

!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";n.r(e);var o=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n="%c"+t+"%c"+e,o="background: #ef5350; color: #fff; font-weight: bold; padding: 5px;",r="background: #fafafa; color: #888; font-weight: bold; padding: 5px;";console.log(n,o,r)};function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var i=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t)}var e,n,i;return e=t,(n=[{key:"getParams",value:function(t){return t.replace(/\s/g,"").split(",")}},{key:"setItems",value:function(){var t=this;document.querySelectorAll("[proportional]").forEach((function(e,n){var o=t.getParams(e.getAttribute("proportional")),r=o[0],i="static"===o[1]?"height":"minHeight",a=o[2],u=o[3],l="rectangle"===r?Math.round(e.offsetWidth/2):e.offsetWidth;e.style[i]=l+"px",void 0!==a&&""!==a&&(e.style.maxHeight=a+"px"),void 0!==u&&""!==u&&"minHeight"!==i&&(e.style.minHeight=u+"px")}))}},{key:"proportionalAvailable",value:function(){var t=this,e=!0;return document.querySelectorAll("[proportional]").forEach((function(n,r){var i=t.getParams(n.getAttribute("proportional")),a=i[0],u=i[1];(void 0===a||"rectangle"!==a&&"square"!==a)&&(o("Proportional","Item "+(r+1)+": Missing a valid shape"),e=!1),(void 0===u||""===u||"liquid"!==u&&"static"!==u)&&(o("Proportional","Item "+(r+1)+': Is this "liquid" or "static"?'),e=!1)})),e}},{key:"process",value:function(){var t,e=this;this.setItems(),window.addEventListener("load",(function(){e.setItems()})),window.addEventListener("resize",(function(){clearTimeout(t),t=setTimeout((function(){e.setItems()}),250)}),!1)}},{key:"init",value:function(){this.proportionalAvailable()&&this.process()}}])&&r(e.prototype,n),i&&r(e,i),t}();e.default=i}]);
//# sourceMappingURL=proportional.min.js.map