JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img src="http://cache4.asset-cache.net/xc/85343814.jpg?v=1&c=IWSAsset&k=2&d=77BFBA49EF8789215ABF3343C02EA548025CCCE89D04F652CD928DC66637A0A8BBF4F2F39EB6464F
    " /></div>

<div class="container">
    <img src="http://www.cobdenclub.co.uk/images/loungebar_pano.jpg" />
</div>

CSS

.container{
    display:block;
    width:250px;
    height:200px;
    outline:1px solid black;
    margin:10px;
    xoverflow:hidden;
}

JavaScript

$('img').ready(function() {
    var me = this;

    function wr() {
        console.log($(me));
        console.log($(this));
        var imageWidth = $(me).width() / 250;
        return imageWidth;
    }

    function hr() {
        var imageHeight = $(me).height() / 200;
        return imageHeight;
    }

    function nh() {
        var newHeight = $(me).height() / hr();
        return newHeight;
    }

    function nw() {
        var newWidth = $(me).width() / wr();
        return newWidth;
    }

    if (wr() < hr()) {
        $(this).css('width', nw() + 'px');
    } else {
        $(this).css('height', nh() + 'px');
    }
});