JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <img class="small-image" src="https://static.wixstatic.com/media/edf429_c611d54c910844a5a194b97d0eb870d4~mv2.png/v1/fill/w_100,h_400,al_c,usm_0.66_1.00_0.01/edf429_c611d54c910844a5a194b97d0eb870d4~mv2.png" alt="">
</div>

<hr>

<div class="container">
  <img src="https://s.winestyle.ru/images_gen/266/2663/0_0_orig.jpg" alt="" class="big-image">
</div>

CSS

body {
  padding: 0 20%;
}


.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 250px;
  border: 2px solid black;
  overflow: hidden;
}

.small-image {
  width: 100%;
}

.big-image {
  width: auto;
  height: auto;
}