Max-height and max-width for divs with dynamic backgrounds?

The following change within your render function will create a 100px square centered on the selection's center point, or as close as possible keeping within the image limits (I'm not sure how to reference the original image's width & height from here).

...
const previews = crops.map(({ pos }, i) => {
  const width = 100 + "px";
  const height = 100 + "px";
  let margx = (pos.w / 2) - 50 + pos.x;
  let margy = (pos.h / 2) - 50 + pos.y;
  if(margx < 0) margx = 0;
  if(margy < 0) margy = 0;
  // this needs origional image width & height (400,300) to get max values
  const maxx = 400-100;
  const maxy = 300-100;
  if(margx > maxx) margx = maxx;
  if(margy > maxy) margy = maxy;
  const marginLeft = - margx + "px";
  const marginTop = - margy + "px";

  return (
    <div
...

If you fix both height and width, the previews will look distorted. So I would recommend only fixing the height.

  const fixedHeight = 100;
  const zoom = fixedHeight / pos.h;
  const backgroundWidth = 400 * zoom;
  const backgroundHeight = 300 * zoom;
  const width = pos.w * zoom;
  const height = fixedHeight;
  const marginLeft = -pos.x * zoom;
  const marginTop = -pos.y * zoom;

See results in this codesandbox demo.