JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<!-- 
    <img style="width: 100px;" src="http://placekitten.com/200/300" alt="" />
-->

<img src="http://placekitten.com/200/300" alt="" />

CSS

/* img { width: 100px; } */

JavaScript

// adds .naturalWidth() and .naturalHeight() methods to jQuery
// for retreaving a normalized naturalWidth and naturalHeight.
(function($){
  var
  props = ['Width', 'Height'],
  prop;

  while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ? 
      function () {
        return this[0][natural];
      } : 
      function () {
        var 
        node = this[0],
        img,
        value;

        if (node.tagName.toLowerCase() === 'img') {
          img = new Image();
          img.src = node.src,
          value = img[prop];
        }
        return value;
      };
    }('natural' + prop, prop.toLowerCase()));
  }
}(jQuery));

// Example usage:
var nWidth = $('img').naturalWidth(),
    nHeight = $('img').naturalHeight();

var wwidth = 'manual';

// If width or height is set manually, use that width and/or height.
if ( wwidth === 'manual' ) {

    console.log( 'Manually set dimensions: ' + $('img').css('width') + ' ' + $('img').css('height') );

}
// If no width or height is set, use the natural width and/or height.
else {
    
    console.log( 'Natural dimensions: ' + nWidth + ' ' + nHeight );
    
}