JS - Ratio Height

nativeratioheight.js

document.addEventListener("DOMContentLoaded", function () {
	setRatioHeight();
	setMinRatioHeight();
});
window.addEventListener('resize', function () {
	setRatioHeight();
	setMinRatioHeight();
});

function setRatioHeight() {
	document.querySelectorAll('[ratio-height]').forEach(function (element) {
		let data = element.getAttribute('ratio-height').match(/(\d+):(\d+)/);
		if (data) {
			let width = data[1],
				height = data[2];
			if (width && height) {
				element.style.height = Math.round((element.offsetWidth / width) * height) + 'px';
			}
		}
	});
}

function setMinRatioHeight() {
	document.querySelectorAll('[min-ratio-height]').forEach(function (element) {
		let data = element.getAttribute('min-ratio-height').match(/(\d+):(\d+)/);
		if (data) {
			let width = data[1],
				height = data[2];
			if (width && height) {
				element.style.minHeight = Math.round((element.offsetWidth / width) * height) + 'px';
			}
		}
	});
}

ratioheight.js

(function ($) {
	function setRatioHeight() {
		$($('[data-ratio-height]')).each(function () {
			// data-ratio-height="4:3"
			var data = $(this).data('ratio-height').match(/(\d+):(\d+)/);
			if (data != null) {
				var width = data[1];
				var height = data[2];
				if (width && height) {
				  $(this).height(Math.round(($(this).width() / width) * height));
				}
			}
			else {
				console.error('data-ratio-height syntaxis eror');
			}
		});
	}
	$(document).ready(function () {
		setRatioHeight();
	});
	$(window).resize(function () {
		setRatioHeight();
	});
})(jQuery);