Generate random images with varying sizes

CSS

body {
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: start;
  justify-content: center;
  gap: var(--gap);
  margin: var(--gap);
}

img {
  --ar: attr(width type(<number>)) / attr(height type(<number>));
  width: calc(20% * var(--ar));
  max-width: min(100%, calc(60% * var(--ar)));
  height: auto;
  flex-grow: calc(var(--ar));
  border-radius: 16px;
  box-shadow: rgb(0 0 0 / 30%) 0px 1px 3px 1px;
}

JavaScript

let body = document.body;
for (let i = 0; i < 50; i++) {
  let width = Math.round(Math.random() * 400 + 100);
  let height = Math.round(Math.random() * 400 + 100);
  let img = document.createElement('img');
  img.src = `https://picsum.photos/${width}/${height}`;
  img.width = width;
  img.height = height;
  body.appendChild(img);
}