JSFiddle - React, Tailwind, and code Playground

HTML

<p>Оригинал картинки</p>
<div class="original">
    <img src="http://www.anypics.ru/large/201401/73190.jpg">
</div>
<p>Обрезанная картинка</p>
<div class="block">
  <a href="#">
    <img src="http://www.anypics.ru/large/201401/73190.jpg">
  </a> 
</div>

CSS

.original img {height: auto;width: 300px;}
.block {border: 1px solid #ff0000;height: 150px;margin-left: 50px;overflow: hidden;position: relative;width: 200px;}
.block a {display: block;height: 500px;left: 50%;line-height: 500px; margin-left: -250px;margin-top: -250px;position: absolute;text-align: center;top: 50%;width: 500px;}
.block img {height: auto;vertical-align: middle;width: 300px;}