JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div><div class="js-aspect-ratio" data-ratio="3:2">2:3</div></div>
<div><div class="js-aspect-ratio" data-ratio="4:6">4:6</div></div>
<div><div class="js-aspect-ratio">16:9</div></div>

CSS

body{
    margin: 0;
    padding: 0;
}
.js-aspect-ratio{
    display: block;
    margin: 0 0 20px;
    background: #888;
}

JavaScript

Site.prototype = {
}

function Site(site){
    this.site = site;
}

Site.prototype.aspectRatio = {
	// Initialize method
	init: function(){
		var parent = this;
		
		parent.findElements();
		parent.resizeElements();
	},
	// Find Elements method
	findElements: function(){
		var parent = this;
		parent.elements = []; 
		$(".js-aspect-ratio").each(function () {
			parent.elements.push($(this));
		});
	},
	// 
	resizeElements: function(){
		var parent = this;
		for(var i = 0; i < parent.elements.length; i++){
			var element = parent.elements[i];
			var ratio = element.attr("data-ratio") || "16:9";
			var ratio = ratio.split(":");
			var ratioWidth = ratio[0];
			var ratioHeight = ratio[1];
			var parentElement = element.parent();
			element.css({"height": "", "width": ""});
			var parentHeight = parentElement.height();
			var parentWidth = parentElement.width();
			var base;
			if(parentWidth > (parentHeight/ratioHeight)*ratioWidth){
				base = parentWidth/ratioWidth;
			} else {
				base = parentHeight/ratioHeight;
			}
			element.css({"height": (base*ratioHeight)+"px", "width": (base*ratioWidth)+"px"});
		}
	}
};

var theCharles = new Site($(this));

theCharles.aspectRatio.init();