cballenar/compare-rectangle-ratios-visually.html

## compare-rectangle-ratios-visually.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Image Ratios Comparisons</title>
</head>
<body>
    <div id ="app" class="container"></div>
</body>
</html>

## main.css
body { overflow: scroll}
body { margin: 4em; }
.container {
    position: relative;
}
.box {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    border: 1px solid #000;
    background: rgba(0,0,0,.05);
    z-index:0;
    border-radius: .25em;
    overflow: hidden;
}
.box:hover { z-index: 1; background: rgba(255,80,103,.6); }
.box::before {
    left: 0; bottom: 0;
    transform: rotateX(-90deg);
    content:attr(title);
    background: #fff;
    padding: .25em 1em;
    border-radius: .25em;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

## main.js
const $app = document.getElementById("app");
const baseValue = 500;

// set app to baseValue height
$app.style = "height:" + baseValue + "px";

// add element function
function addElementToApp(ratio, title) {
    const newDiv = document.createElement("div");

    newDiv.classList.add("box");
    newDiv.title = title;
    newDiv.style = "width:" + ratio * baseValue + "px";

    // add the newly created element and its content into the DOM
    $app.appendChild(newDiv);
}

// loop through size comparisons
sizes.reverse().forEach(e=>{
    addElementToApp(e.ratio, e.name);
});

## rectangle-ratios.js
sizes = [
    {"name":"Featured small, Header small", "width": 500, "height": 680, "ratio": 0.74 },
    {"name":"Profile", "width": 378, "height": 430, "ratio": 0.88 },
    {"name":"Medium, Large, People card, Linkit result thumbnail, Media Library thumbnail, Thumbnail", "width": 220, "height": 220, "ratio": 1.00 },
    {"name":"Card image", "width": 388, "height": 344, "ratio": 1.13 },
    {"name":"Fiftyfifty background", "width": 720, "height": 600, "ratio": 1.20 },
    {"name":"Teaser", "width": 152, "height": 120, "ratio": 1.27 },
    {"name":"Featured large, Header large", "width": 1000, "height": 680, "ratio": 1.47 },
    {"name":"Rich text full size", "width": 900, "height": 560, "ratio": 1.61 },
    {"name":"Related content", "width": 300, "height": 185, "ratio": 1.62 },
    {"name":"Featured teaser, Article feature, Article feature retina", "width": 690, "height": 415, "ratio": 1.66 },
    {"name":"Paragraph Preview Thumbnail", "width": 150, "height": 90, "ratio": 1.67 },
    {"name":"Entity Browser Thumbnail", "width": 319, "height": 184, "ratio": 1.73 },
    {"name":"Media thumbnail", "width": 182, "height": 104, "ratio": 1.75 },
    {"name":"Gallery, Slick media, Image component, Media Image Mobile, Media Image Tablet, Media Image", "width": 853, "height": 480, "ratio": 1.78 },
    {"name":"Facebook", "width": 1200, "height": 630, "ratio": 1.90 },
    {"name":"Social Image", "width": 1200, "height": 628, "ratio": 1.91 },
    {"name":"Twitter", "width": 1024, "height": 512, "ratio": 2.00 },
    {"name":"Featured XL", "width": 2000, "height": 840, "ratio": 2.38 },
    {"name":"Header XL", "width": 2000, "height": 680, "ratio": 2.94 }
];
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Image Ratios Comparisons</title>
	</head>
	<body>
	<div id ="app" class="container"></div>
	</body>
	</html>
	body { overflow: scroll}
	body { margin: 4em; }
	.container {
	position: relative;
	}
	.box {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	margin: auto;

	border: 1px solid #000;
	background: rgba(0,0,0,.05);
	z-index:0;
	border-radius: .25em;
	overflow: hidden;
	}
	.box:hover { z-index: 1; background: rgba(255,80,103,.6); }
	.box::before {
	left: 0; bottom: 0;
	transform: rotateX(-90deg);
	content:attr(title);
	background: #fff;
	padding: .25em 1em;
	border-radius: .25em;
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
	}
	const $app = document.getElementById("app");
	const baseValue = 500;

	// set app to baseValue height
	$app.style = "height:" + baseValue + "px";

	// add element function
	function addElementToApp(ratio, title) {
	const newDiv = document.createElement("div");

	newDiv.classList.add("box");
	newDiv.title = title;
	newDiv.style = "width:" + ratio * baseValue + "px";

	// add the newly created element and its content into the DOM
	$app.appendChild(newDiv);
	}

	// loop through size comparisons
	sizes.reverse().forEach(e=>{
	addElementToApp(e.ratio, e.name);
	});
	sizes = [
	{"name":"Featured small, Header small", "width": 500, "height": 680, "ratio": 0.74 },
	{"name":"Profile", "width": 378, "height": 430, "ratio": 0.88 },
	{"name":"Medium, Large, People card, Linkit result thumbnail, Media Library thumbnail, Thumbnail", "width": 220, "height": 220, "ratio": 1.00 },
	{"name":"Card image", "width": 388, "height": 344, "ratio": 1.13 },
	{"name":"Fiftyfifty background", "width": 720, "height": 600, "ratio": 1.20 },
	{"name":"Teaser", "width": 152, "height": 120, "ratio": 1.27 },
	{"name":"Featured large, Header large", "width": 1000, "height": 680, "ratio": 1.47 },
	{"name":"Rich text full size", "width": 900, "height": 560, "ratio": 1.61 },
	{"name":"Related content", "width": 300, "height": 185, "ratio": 1.62 },
	{"name":"Featured teaser, Article feature, Article feature retina", "width": 690, "height": 415, "ratio": 1.66 },
	{"name":"Paragraph Preview Thumbnail", "width": 150, "height": 90, "ratio": 1.67 },
	{"name":"Entity Browser Thumbnail", "width": 319, "height": 184, "ratio": 1.73 },
	{"name":"Media thumbnail", "width": 182, "height": 104, "ratio": 1.75 },
	{"name":"Gallery, Slick media, Image component, Media Image Mobile, Media Image Tablet, Media Image", "width": 853, "height": 480, "ratio": 1.78 },
	{"name":"Facebook", "width": 1200, "height": 630, "ratio": 1.90 },
	{"name":"Social Image", "width": 1200, "height": 628, "ratio": 1.91 },
	{"name":"Twitter", "width": 1024, "height": 512, "ratio": 2.00 },
	{"name":"Featured XL", "width": 2000, "height": 840, "ratio": 2.38 },
	{"name":"Header XL", "width": 2000, "height": 680, "ratio": 2.94 }
	];