JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="a"><img src="//placehold.it/300x500" alt=""></div>
<div class="a"><img src="//placehold.it/300x200" alt=""></div>

<div class="b"><img src="//placehold.it/300x500" alt=""></div>
<div class="b"><img src="//placehold.it/300x200" alt=""></div>

SCSS

div {margin:10px; width:200px; height:200px; overflow: hidden;}

// Recadrée et centrée
.a {position: relative;
  & > img {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
}

// Redimensionnée et centrée
.b {position: relative; background-color: tomato;
  & > img {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width: 100%; max-height:100%;}
}

.c {}