JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="zoom">
<img id="beben" src="https://lh4.googleusercontent.com/-HsU1me6btjQ/Sp60-b0ctLI/AAAAAAAAATw/W9KSBNvDuvs/s512/cg-robots-18.jpg" alt="cg-robots" style="width:100%" />
</div>
<center>
<input type="button" value="-" onclick="zoom('beben', -1)" /> ZOOM 
<input type="button" value="+" onclick="zoom('beben', 1)" />
</center>

CSS

#zoom {
width: 400px;
height: 450px;
overflow: scroll;
border: 1px solid #500;
text-align: center;
margin: 0 auto;
}

JavaScript

<!--
function zoom(e, sens) {
    var elm = document.getElementById(e);
    var w = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
    var wc = (elm.parentNode.offsetWidth) ? elm.parentNode.offsetWidth : elm.parentNode.style.pixelWidth;
    w = (sens > 0) ? w * 1.35 : w / 1.35;
    if (w < wc) w = wc;
    elm.style.width = w + "px";
}
-->