JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/9/91/F-15_vertical_deploy.jpg" height="196" width="196" id="result"></img>
<div class="share-link"></div>

<img src="http://upload.wikimedia.org/wikipedia/commons/9/91/F-15_vertical_deploy.jpg" height="296" width="196" id="result2"></img>
<div class="share-link2"></div>

JavaScript

var resultHeight = $("#result").height();
var resultWidth = $("#result").width();
console.log(resultHeight, resultWidth);
var resultHeight2 = $("#result2").height();
var resultWidth2 = $("#result2").width();
console.log(resultHeight2, resultWidth2);

if (resultHeight > resultWidth) {
    orientation = "PORTRAIT";
    $(".share-link").html("This is a portrait image");
} else if (resultWidth > resultHeight) {
    orientation = "LANDSCAPE";
    $(".share-link").html("This is a landscape image");
} else{
    orientation = "SQUARE";
    $(".share-link").html("This is a square image");
}
console.log(orientation);


var resultHeight2 = $("#result2").height();
var resultWidth2 = $("#result2").width();

if (resultHeight2 > resultWidth2) {
    orientation = "PORTRAIT";
    $(".share-link2").html("This is a portrait image");
} else if (resultWidth2 > resultHeight2) {
    orientation = "LANDSCAPE";
    $(".share-link2").html("This is a landscape image");
} else {
    orientation = "SQUARE";
    $(".share-link2").html("This is a square image");
}
console.log(orientation);