JSFiddle - React, Tailwind, and code Playground

by Philipp Gaponenko

HTML

<div class="wrapper">
  <div class="pic"></div>
</div>

<div class="wrapper">
  <img src="http://videorator.ru/upload/005/u573/20/d9/921a2d76.jpg" alt="cat" class="img img_self-align">
</div>

<div class="wrapper wrapper_flex">
  <img src="http://videorator.ru/upload/005/u573/20/d9/921a2d76.jpg" alt="cat" class="img">
</div>

CSS

.wrapper {
  width: 300px;
  height: 200px;
  margin-bottom: 20px;
  outline: 2px solid;
  overflow: hidden;
}

.wrapper_flex {
  display: flex;
  align-items: center;
}

.pic {
  background: url('http://videorator.ru/upload/005/u573/20/d9/921a2d76.jpg') no-repeat center;
  background-size: cover;
  height: 100%;
}

.img {
  width: 100%;
}

.img_self-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}