JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carrousel" id="noticias">
    <div class="h100x100" id="parentContainer">
        <div class="part">
            <div class="left">
                <div class="left1">
                    <div class="borders">
                        <img id="img1" src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
                <div class="left2">
                    <div class="borders">
                        <img src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
                <div class="left3">
                    <div class="borders">
                        <img src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right1">
                    <div class="borders">
                        <img src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
                <div class="right2">
                    <div class="borders">
                        <img src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
                <div class="right3">
                    <div class="borders">
                        <img src="http://i.kinja-img.com/gawker-media/image/upload/bwtqjhtu3zqpp8qnxnhu.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.carrousel {
    width: 100%;
    height: 0;
    padding-bottom: 40%;
    position: relative;
    overflow: hidden;
}
.h100x100 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    white-space: nowrap;
    font-size: 0;
    -webkit-transform: translate(-000%);
    -ms-transform: translate(-000%);
    transform: translate(-000%);
    -webkit-transition: all 1000ms cubic-bezier(0.580, 0.185, 0.420, 0.915);
    transition: all 1000ms cubic-bezier(0.580, 0.185, 0.420, 0.915);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.580, 0.185, 0.420, 0.915);
    transition-timing-function: cubic-bezier(0.580, 0.185, 0.420, 0.915);
    /* custom */
}
.part {
    width: 100%;
    height: 100%;
    display:inline-block;
    white-space: normal;
}
.left {
    width: 50%;
    height: 100%;
    float: left;
}
.right {
    width: 50%;
    height: 100%;
    float: right;
}
.left1 {
    width: 100%;
    height: 50%;
    float: left;
    padding: 1px 1px 1px 0px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.left2 {
    width: 50%;
    height: 50%;
    float: left;
    padding: 1px 1px 1px 0px;
    box-sizing: border-box;
    overflow: hidden;
}
.left3 {
    width: 50%;
    height: 50%;
    float: left;
    padding: 1px 1px 1px 1px;
    box-sizing: border-box;
    overflow: hidden;
}
.right1 {
    width: 50%;
    height: 50%;
    float: left;
    padding: 1px 1px 1px 1px;
    box-sizing: border-box;
    overflow: hidden;
}
.right2 {
    width: 50%;
    height: 50%;
    float: left;
    padding: 1px 0px 1px 1px;
    box-sizing: border-box;
    overflow: hidden;
}
.right3 {
    width: 100%;
    height: 50%;
    float: left;
    padding: 1px 0px 1px 1px;
    box-sizing: border-box;
    overflow: hidden;
}
.borders {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.part img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
   ...

JavaScript

//Tamaño a las imagenes
function fitToParent(objsParent, tagName) {
    var parent, imgs, imgsCant, a, loadImg;
    //Seleccionar imagenes
    parent = document.getElementById(objsParent);
    imgs = parent.getElementsByTagName(tagName);
    imgsCant = imgs.length;

    //funcion para dar tamaño
    function scaleImgs(a) {
        "use strict";
        var w, h, ratioI, wP, hP, ratioP, imgsParent;
        w = imgs[a].naturalWidth;
        h = imgs[a].naturalHeight;
        ratioI = w / h;

        imgsParent = imgs[a].parentNode;
        wP = imgsParent.clientWidth;
        hP = imgsParent.clientHeight;
        ratioP = wP / hP;

        console.log(w);
        console.log(h);
        console.log(ratioI);
        console.log(imgs[a].complete);

        if (ratioP > ratioI) {
            imgs[a].style.width = "100%";
        } else {
            imgs[a].style.height = "100%";
        }
    }
    //Loop imagenes y darles tamaño
    var imgCache = [];
    for (a = 0; a < imgsCant; a += 1) {
        imgCache[a] = new Image();
        imgCache[a].onload = function () {
            console.log(imgCache[a].src);
            return function () {
                scaleImgs(a);
            };
        }(a);

        imgCache[a].src = imgs[a].getAttribute('src');
    }

}
fitToParent("noticias", "img");