JSFiddle - React, Tailwind, and code Playground

by Dana Dana

HTML

<div id="myDiv" class="img-wrapper">
</div>

CSS

.img-wrapper {
    overflow: hidden;
    height: 400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
}

.img-wrapper > img {
    display: inline-block;
    height: 150%;
    width: 150%;
    position: relative;
    top: -50%;
}

JavaScript

imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"

$('.img-wrapper').append($('<img id="theImg">').attr({
                'src': 'https://' + imgUrl ,
                'alt': 'test image'
            })
            )