JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div id="section-one" class="section">
    <img id="section-one-img" src="http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg" />
<div>

JavaScript

jQuery(document).ready(function() {
    if (jQuery(window).width() < 880) {  
        var img = 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg';          
    
        var pic_real_width, pic_real_height;
        $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("src", img)
            .load(function() {
                pic_real_width = this.width;   // Note: $(this).width() will not
                pic_real_height = this.height; // work for in memory images.
                /*alert(pic_real_width);
                alert(pic_real_height);*/
            });    
   jQuery('#section-one-img').attr("src", 'http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg');
          jQuery('#section-one-img').height(pic_real_height);
    }
});