JSFiddle - React, Tailwind, and code Playground

HTML

original image is 230x97. In firefox the bottom image doesn't preserve aspect ratio
<div class="one">
  <wrapperBlock>
    <img src='http://www.flex-box.com/images/elements/logo.jpg'/>
  </wrapperBlock>
</div>

<br>

<div class="two">
  <wrapperBlock>
    <img src='http://www.flex-box.com/images/elements/logo.jpg'/>
  </wrapperBlock>
</div>

CSS

wrapperBlock {
  display:block;
  min-width:0;
}
wrapperBlock > img {
    display:block;
}
div {
  display: flex;
  align-items: center;
  border: 1px solid black; }
  
.one {
  width: 250px;
  height: 250px; }
  
.two {
  width: 120px;
  height: 120px; }

img {
  max-height: 100%;
  max-width: 100%;
}