<div class="row">
  <!-- 
    Each column has a `flex` set to 
    the intrinsic (natural) width of
    the source image.  
  -->
  <div class="col" style="flex: 220">
    <img alt="A cute kitten" src="https://placekitten.com/220/450" />
  </div>
  <div class="col" style="flex: 400">
    <img alt="A cute kitten" src="https://placekitten.com/400/450" />
  </div>
  <div class="col" style="flex: 250">
    <img alt="A cute kitten" src="https://placekitten.com/250/450" />
  </div>
</div>

.row {
  display: flex;
  gap: 32px;
  /* 
    These properties added purely 
    for the demo: 
  */
  overflow: auto;
  resize: horizontal;
  width: 50%;
}

.col img {
  /* 
    This bit is critical: Each image
    should fill the available column
    width (its height will scale 
    automatically!).
  */
  width: 100%;
}