<div class="hero">
  <img src="https://images.unsplash.com/photo-1658786335136-0b3e83dcb63a" alt="cute dog">
</div>

.hero {
  max-height: 100vh;
  overflow: hidden;
}

img {
  max-width: 100%;
}

/* Show the centre of the image using positioning */
/* html,
body,
.hero {
  height: 100%;
}

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
} */

/* Show the centre of the image using flex */
.hero {
  display: flex;
  align-items: center;
}