JSFiddle - React, Tailwind, and code Playground

by ham ism

HTML

<div id="test">
        <img src="http://placehold.it/300x300" />    
   </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

CSS

#test{
     width:300px
}

JavaScript

var aspectRatio = 9/16; 
		$('#test img').css('width','100%');
		var imgWidth = $('#test img').css('width');

		// we have to remove the suffix px in imgWidth otherwise we will get 
		// a NaN value when we attempt to use that value in arithmetic 
		// operations

		imgWidth = imgWidth.replace('px','');  

		// above the image width is converted from percentage format(%) to a 
		// static value for example 300px

		var newHeight = imgWidth*aspectRatio;


		$('#test img').css('height',newHeight+'px');
		console.log(imgWidth+'\n');
		console.log(newHeight);