JSFiddle - React, Tailwind, and code Playground

by Christopher

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<a href=""><img class="apple" src="http://vaporizethevapestore.ca/wp-content/uploads/2015/06/s608755256439408308_p49_i2_w4201.jpg" class="apple" /></a>
<h1>This is a apple</h1>

CSS

a img.apple {border-style: dotted;color:blue;}
h1 {color:orange;}

JavaScript

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $("a img.apple").width();
        if ((contentwidth) < '700'){
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x2', 'x1');
                thisImg.attr('src', newSrc);
            });
        } else if {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        } else {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
 });