JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button id="js-changeKitten">ねこさんチェンジ</button>
    <select id="js-changeBgSize">
        <option value="bgs_100auto">background-size: 100% auto;っぽく</option>
        <option value="bgs_auto100">background-size: auto 100%;っぽく</option>
        <option value="bgs_cover">background-size: cover;っぽく</option>
        <option value="bgs_contain">background-size: contain;っぽく</option>
    </select>
</div>

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

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

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

<script>
(function(){
    /*
     * ボタンを押してねこ画像を切り替える
     */
    var change = document.querySelectorAll('#js-changeKitten')[0];
    var kitten1 = document.querySelectorAll('#js-kitten1')[0];
    var kitten2 = document.querySelectorAll('#js-kitten2')[0];
    var kitten3 = document.querySelectorAll('#js-kitten3')[0];
    var kittenPath = '';

    var makeRandumNum = function(){
        var num = Math.floor(Math.random() * 10);

        // placekittenがサイズによって画像が出ないことがあるので変なフォールバックを書いた
        if(num <= 1){
            return '200';
        } else {
            return num+'00';
        }
    };

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

        // placekittenがサイズによって画像が出ないことがあるので変なフォールバックを書いた
        if(num1 == 200 && num2 == 200){
            num1 = "500"
            num2 = "700"
        }

        kittenPath = path+num1+'/'+num2;
        console.log(kittenPath);
        return;
    };

    change.addEventListener('click', function(){
        makeKittenImage();
        kitten1.setAttribute('src', kittenPath);
        kitten2.setAttribute('src', kittenPath);
        kitten3.setAttribute('src', kittenPath);
   ...

CSS

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

.wrap img{
    position: absolute;
    margin: auto;
}

.type1 img{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.type2 img{
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
}

.bgs_100auto img{
    width: 100%;
}

.bgs_auto100 img{
    height: 100%;
}

.bgs_contain img{
    max-width: 100%;
    max-height: 100%;
}

.bgs_cover img{
    min-width: 100%;
    min-height: 100%;
}

/* for Debug */
.wrap{
    float: left;
    margin: 10px;
}

.type1{
    border: 2px solid crimson;
}

.type2{
    border: 2px solid navy;
}

.type1:after{
    content: 'TRBL: 0';
    color: white;
}

.type2:after{
    content: 'TRBL: -100%';
    color: white;
}

.preview{
    position: relative;
    float: left;
    margin: 10px;
    border: 2px solid gold;
    max-width: 900px;
    min-height: 200px;
}

.preview img{
    vertical-align: top;
}

.preview:before{
    content: 'Original Preview';
    color: gold;
}

.type1:after,
.type2:after,
.preview:before{
    position: absolute;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 #000,
        -1px 1px 0 #000,
        -1px 0 0 #000,
        1px -1px 0 #000,
        1px 1px 0 #000,
        1px 0 0 #000,
        0 -1px 0 #000,
        0 1px 0 #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)";
    filter:...