<div class="row">
  <div style="--ratio: 1024 / 600;" class="item">
    <img src="https://image-placeholder.com/images/actual-size/1024x600.png" width="1024" height="600" alt="">
  </div>
  <div style="--ratio: 640 / 640;" class="item">
    <img src="https://image-placeholder.com/images/actual-size/640x640.png" width="640" height="640" alt="">
  </div>
  <div style="--ratio: 375 / 500;" class="item">
    <img src="https://image-placeholder.com/images/actual-size/375x500.png" width="375" height="500" alt="">
  </div>
</div>

.row {
  --modifier: calc((30rem - 100%) * 999);
  
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex-basis: max(var(--modifier), 0px );  
  aspect-ratio: var(--ratio);
  flex-grow: calc(var(--ratio));
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}


/* additional Styling */
body {
  background: #003;
  color: #fff;
  padding: 2rem;
}

.row {
  max-width: 90rem;
  border: 1px dashed rgb(255 255 255 / 0.4);
  margin-inline: auto;
  padding: 0.5rem;
}