JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img class="image three-x hidden" src="https://s3-ap-southeast-1.amazonaws.com/grab-gpns/Responsive/1242x604.png" />
<img class="image two-x hidden" src="https://s3-ap-southeast-1.amazonaws.com/grab-gpns/Responsive/750x365.png" />
<img class="image one-point-five-x hidden" src="https://s3-ap-southeast-1.amazonaws.com/grab-gpns/Responsive/540x262.png" />
<img class="image one-x hidden" src="https://s3-ap-southeast-1.amazonaws.com/grab-gpns/Responsive/360x175.png" />

CSS

.hidden {
  display: none;
}

.image {
  width: 100%;
}

JavaScript

var ratio = window.devicePixelRatio;
var isOnex =  ratio >= 1 && ratio < 1.5;
var isOnePointFivex = ratio >= 1.5 && ratio < 2;
var isTwox = ratio >= 2 && ratio < 3;
var isThreex = ratio >= 3;

var imageThreeX = document.querySelector('.three-x');
var imageTwoX = document.querySelector('.two-x');
var imageOnePointFiveX = document.querySelector('.one-point-five-x');
var imageOneX = document.querySelector('.one-x');

console.log('ratio: ', ratio);

if (isThreex) {
	imageThreeX.classList.remove('hidden');
} else if (isTwox) {
	imageTwoX.classList.remove('hidden');
} else if (isOnePointFivex) {
	imageOnePointFiveX.classList.remove('hidden');
} else {
	imageOneX.classList.remove('hidden');
}