JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<!-- https://www.studiokleiner.com/wp-content/uploads/2020/04/studio-kleiner-storytel-sound-waves-2560x1918.jpg -->

<div class="gallery-item">
    <img class="gallery-image" src="https://www.studiokleiner.com/wp-content/uploads/2020/04/studio-kleiner-storytel-sound-waves-2560x1918.jpg"/>
</div>

CSS

.gallery-item {
	background: blue;
  height: 300px;
  position: relative;
}

.gallery-image {
	max-width: 80%;
	max-height: 80%;
  background: green;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}