JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="table">
        <div class="row">
            <div class="cell" id="image1"></div>
            <div class="cell" id="image2"></div>
            <div class="cell" id="image3"></div>
            <div class="cell" id="image4"></div>
        </div>
    </div>
</body>

CSS

.table {
    display: table;
    width: 1000px;
    height: 250px;
    background: #000;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 250px;
    height: 250px;
}
#image1 {
    background: url("http://placekitten.com/500/500");
    background-size: cover;
}
#image2 {
    background: url("http://placekitten.com/1000/750");
    background-size: cover;
}
#image3 {
    background: url("http://placekitten.com/250/500");
    background-size: cover;
}
#image4 {
    background: url("http://placekitten.com/800/600");
    background-size: cover;
}

JavaScript

/*
    Using large images of various sizes from PlaceKitten.Com and shrinking them
    down with CSS3's "background-size: cover" property.
*/