JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="line">
    <img class="Desktop" src="http://i.imgur.com/TMlkdRE.jpg" />
    Image size is [W:150px, H:100px;]
</div>
<br>

<div class="line">
    <img class="Mobile" src="http://i.imgur.com/TMlkdRE.jpg" /> Aspect ratio is 0.53
</div>

CSS

.Desktop{
    vertical-align:middle;
}

.Mobile
{
    vertical-align:middle;
     -webkit-transform: scale(0.53); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.53); /* FF3.5+ */
     -ms-transform: scale(0.53); /* IE9 */
     -o-transform: scale(0.53); /* Opera 10.5+ */
     transform: scale(0.53);
}

.line
{
    height:100px;
    padding:0px;
    margin:0px;
    line-height:100px;   
}