JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button id="js-changeKitten">ねこさんチェンジ</button>
</div>

<div class="wrap">
    <img id="js-kitten" src="https://placekitten.com/g/300/500">
</div>

<div class="preview">
    <img id="js-preview" src="https://placekitten.com/g/300/500">
</div>

<script>
(function(){
    var change = document.querySelectorAll('#js-changeKitten')[0];
    var kitten = document.querySelectorAll('#js-kitten')[0];
    var preview = document.querySelectorAll('#js-preview')[0];
    var kittenPath = '';

    var makeRandumNum = function(){
        var num = Math.floor(Math.random() * 10);
        if(num <= 1){
            return '200';
        } else {
            return num+'00';
        }
    };

    var makeKittenImage = function(){
        var path = 'https://placekitten.com/g/';
        var num1 = makeRandumNum();
        var num2 = makeRandumNum();

        if(num1 == 200 && num2 == 200){
            num1 = "500"
            num2 = "700"
        }

        kittenPath = path+num1+'/'+num2;
        return;
    };

    change.addEventListener('click', function(){
        makeKittenImage();
        kitten.setAttribute('src', kittenPath);
        preview.setAttribute('src', kittenPath);
    }, false);
})();
</script>

CSS

.wrap{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.wrap img{
  position: absolute;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  margin: auto;
  width: 100%;
}

/* for Debug */
.wrap{
  border: 2px solid magenta;
  resize: both;
  overflow: hidden;
}

.inner{
  border: 2px solid navy;
  background-color: skyblue;
  overflow:hidden;
  resize:both;
}