JSFiddle - React, Tailwind, and code Playground

by Husen

HTML

<div class="image-holder">
        <img src="http://img1.wikia.nocookie.net/__cb20090215184732/x-men/images/d/d9/250px-MultipleMan01.jpg" />
    </div>

CSS

.image-holder 	  { position:relative;  width:250px;  border:1px solid; overflow:hidden; height:250px; }
.image-holder img { transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; width:auto }