JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div class="container">
<div class="a"><img src="http://placehold.it/160x90"/></div>
<div class="a"><img src="http://placehold.it/100x200"/></div>
<div class="a"><img src="http://placehold.it/160x90"/></div>
<div class="a"><img src="http://placehold.it/100x200"/></div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 100%;
    max-width: 1200px;
}

.a {
    position: relative;
    float: left;
    width: 23%;
    height: 0;
    padding-bottom: 13%;
    margin-right: 2%;
    overflow: hidden;
}
img{
    position: absolute;
    margin: auto;
    left: 0; top: 0; bottom: 0; right: 0;
    display: block;
    max-width: 100%;
    height: auto;
}

JavaScript

// CSS для галереи с обрезанием картинок по высоте