object-fit with flowbox

HTML

<div class="main-container">
  <div id="img-slot">
  	<!--img src="https://cdn.pixabay.com/photo/2019/05/15/19/13/flower-4205744_1280.jpg"-->
	<img src="https://cdn.pixabay.com/photo/2016/01/16/22/03/poppy-1144084_1280.jpg">
  </div>
  
  <div id="timer">
    <span>01:02:03</span>
  </div>
</div>

CSS

.main-container {
  width: 300px;
  height: 300px;
  
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
}

#img-slot {
  flex: 1;
  
  background-color: pink;
}

#img-slot img {
  width: 100%;
  height: 100%;
  
  object-fit: contain;
}

#timer {
  flex: none;
  
  font-size: 20px;
  text-align: center;
  
  background-color: skyblue;
}