JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="modal">
  <div class="control">
    Top
  </div>
  <div class="main">
    <div class="content">
      <img src="https://picsum.photos/3000/2000/?image=940" alt="" />
    </div>
  </div>
  <div class="control">
    Bottom
  </div>
</div>

SCSS

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100vh;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.control {
  padding: 1rem;
  background-color: navy;
  color: white;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  
  flex: 0 1 100%;
  padding: 1rem;
  background-color: #ddd;
}

.content {
  max-height: 100%;
  max-width: 100%;
  outline: 1px solid red;
}

img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}