JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<img id='fun' src='http://localhost:5000/test.png'/>

CSS

#fun{
    width:80%;
}

JavaScript

winH= $(window).height();
winW= $(window).width();
fun =  $('#fun');
zoomer =  fun.clone();
rect = fun[0].getBoundingClientRect();

zoomer.attr('id','zoomer')
zoomer.css({position:'fixed',left:rect.left,top:rect.top,zoom:0.05})
fun.parent().append(zoomer)

HW = rect.height /rect.width ;
winHW= winH /winW 
if (HW > 1) {
    fun.height(winH),fun.width(winH / HW)
    
}else {
    fun.width(winW);fun.height(winW * HW);
}

zoomer.mouseenter(function() {
    console.log(this)
})
/*zoomer.on('dragenter' function() {
    console.log(this)
})*/