JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <img id="img1" src="http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png" />
    </div>
</div>
<button class="zoomout" data-zoom="out">Zoom Out</button > 
<button class="zoomin" data-zoom="in">Zoom In</button >

CSS

.outer{
    height:400px;
    width:400px;
    overflow:auto;
    border:1px solid black;
    float:left;
    margin:30px;
    text-align:center;
}

.inner {
    height:400px;
    width:400px;
    display:table-cell;
    vertical-align:middle;
}

img {
    width:300px;
    height:300px;
}

JavaScript

var img       = $('img'),
    imgWidth  = img.width(),
	imgHeight = img.height();
    
$('.zoomout').on('click', function(){
    imgWidth  = imgWidth - 20;
    imgHeight = imgHeight - 20;
    $('img').width(imgWidth);
    $('img').height(imgHeight);
});

$('.zoomin').on('click', function(){

    imgWidth  = imgWidth + 20;
    imgHeight = imgHeight + 20;
    $('img').width(imgWidth);
    $('img').height(imgHeight);
});