JSFiddle - React, Tailwind, and code Playground

by aryzing

HTML

<div class='root1'>
  <div class='child'>
    <img class='bingo' src="http://www.audubon.org/sites/default/files/styles/engagement_card/public/sfw_apa_2013_28342_232388_briankushner_blue_jay_kk_high.jpg?itok=ttMfUhUu">
  </div>
</div>

<div class='root2'>
  <div class='child'>
    <div class='bingo'></div>
  </div>
</div>

CSS

.root1, .root2 {
    display: flex;
    height: 150px;
    justify-content: center;
    flex-direction: column;
}
.root1 {
  background-color: lightgreen;
}
.root2 {
  background-color: lightblue;
}
.child {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}
.bingo {
    display: block;
    object-fit: contain;
    flex-grow: 1;
    border: 1px solid black;
}

div.bingo {
  background-color: pink;
}