JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<div class="owl-carousel-custom-height">
    <div class="crop-thumbnail">                                    
        <img src="http://placehold.it/300x300/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x350/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x320/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x310/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x380/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x345/" />
    </div>
    <div class="crop-thumbnail">
        <img src="http://placehold.it/300x305/" />
    </div>
</div>

CSS

.owl-carousel-custom-height .crop-thumbnail {
    position: relative;
    width: 185px;
    height: 185px;
    overflow: hidden;
    display: inline-block
}
.owl-carousel-custom-height .crop-thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%,-50%) !important;
      -ms-transform: translate(-50%,-50%) !important;
          transform: translate(-50%,-50%) !important;
}