<div class="wrapper">

  <div class="logo-row">
    <div class="logo" style="--width:48; --height: 48;">
      <img src="https://assets.codepen.io/963316/9elements.svg" alt="" width="49" height="48" />
    </div>
    <div class="logo" style="--width:228; --height: 48;">
      <img src="https://assets.codepen.io/963316/imgly.svg" width="228" height="48" alt="" />
    </div>
    <div class="logo" style="--width:79; --height: 48;">
      <img src="https://assets.codepen.io/963316/CSS+Cafe.svg" width="79" height="48" alt="" />
    </div>
    <div class="logo" style="--width:60; --height: 48;">
      <img src="https://assets.codepen.io/963316/ruhrgebiet.svg" width="60" height="48" alt="" />
    </div>
    <div class="logo" style="--width:131; --height: 48;">
      <img src="https://assets.codepen.io/963316/css-4-5.svg" width="131" height="48" alt="" />
    </div>
    <div class="logo" style="--width:255; --height: 48;">
      <img src="https://assets.codepen.io/963316/10xd.svg" width="255" height="48" alt="" />
    </div>
  </div>
</div>

.logo-row {
  --base-height: 3rem;
  --scale-factor-horizontal: 0.1;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 2rem;
  padding: 1.5rem 1rem;
  background: #000;
}

.logo {
  --base-ratio: calc(var(--width) / var(--height));
  aspect-ratio: var(--base-ratio);
  
  --factor-horizontal: min(
	  var(--scale-factor-horizontal) * -1 * var(--base-ratio) + var(--scale-factor-horizontal) + 1,
	  1
  );
  height: max(
    var(--base-height) / 2,
    var(--base-height) * var(--factor-horizontal)
  );
  
  & img {
    width: 100%;
    height: auto;
  }
}

/* --- Additional CSS Stuff --- */

body {
  margin: 2rem;
  background: #333;
  color: #fff;
}

.wrapper {
  width: min(100% - 1rem, 80rem);
  margin-inline: auto;
  
  > * + * {
    margin-block-start: 4rem;
  }
}

p {
  margin-block-end: 0.5em;
}