具有动态背景的div的最大高度和最大宽度？

Question

我有一个代码，负责裁剪图像并将其裁剪区域保存在div列表中。每个div代表每个裁剪的图像。但是问题是-我不希望它们太大，我希望它们具有fixed高度和宽度，例如max 100x100px。

具有有效图像裁剪功能的Codesandbox：https ://codesandbox.io/s/fast-frost-0b5tt 裁剪逻辑相关的代码：

const width = pos.w + "px";
const height = pos.h + "px";
const marginLeft = - pos.x + "px";
const marginTop = - pos.y + "px";

return (
  <div
    key={i}
    style={{
      width: width,
      height: height,
      backgroundSize: "400px 300px",
      backgroundPosition: `top ${marginTop} left ${marginLeft}`,
      backgroundImage: "url('https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=400')"
    }}
  />
);

您会看到图像裁剪效果很好，但是新创建的图像具有动态的高度和宽度。

问题：如何使这些新创建的div具有固定的宽度和高度，但又不破坏它？谢谢！

编辑：添加了新链接（旧的链接丢失了样式）

目的是使子代（裁剪的图像）具有固定的高度和宽度，但将背景图像保持在正确的位置。但似乎我太停顿了，不能自己做

Answer 1

如果同时固定高度和宽度，预览看起来会变形。所以我建议只固定高度。

  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;

请参阅此Codesandbox 演示中的结果。