JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gifdiv">
    <img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg"/>
</div>

CSS

body {
			
    padding: 0;
    border: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

#gifdiv {
    width: 100%;
    height: 100%;
    max-width: 660px;
    max-height: 370px;
}

img {
    max-width: 100%;
    max-height: 100%;
    background-size: contain;
    background-repeat: no-repeat; 
}

JavaScript

$(document).ready(function() {

    $("#gifdiv").click(function () {
        
        var img = $(this).find("img").get(0);  
        var imgSrc = img.src;
        imgSrc = imgSrc.replace(".png", ".gif");
        img.src = imgSrc;     
        
    });
    
});