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

Question

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

带有工作图像裁剪的代码沙盒：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

我会尝试在没有 jcrop 库的情况下进行重写，以便更好地访问所有道具、大小、定位等。 https://stackblitz.com/edit/react-7ubxaa

Answer 2

我可以在@MunimMunna 和@ArleighHix 提出的解决方案之间提出一些改进方案。 See result

// setup base image size
const imageBaseWidth = 400;
const imageBaseHeight = 300;
// choose thumbnail size and aspect ratio
const thumbHeight = 100;
const thumbWidth = 200;
// we check which axis needs to be filled to border
const zoomX = thumbWidth / pos.w;
const zoomY = thumbHeight / pos.h;
// you can improve it further by defining max zoom in level so that thumbnails don't show ugly pixels
// just use additional zoom = Math.min(zoom, maxZoom) and some more logic for handling min max margin offset so it wont go outside image bounds
const zoom = Math.max(zoomX, zoomY);
// scaling base image to best fit available space
const backgroundWidth = imageBaseWidth * zoom;
const backgroundHeight = imageBaseHeight * zoom;
// calculate offset to top left corner of biggest rect in selected region that keeps target aspect ratio
const marginLeft = thumbWidth / 2 - (pos.w / 2 + pos.x) * zoom;
const marginTop = thumbHeight / 2 - (pos.h / 2 + pos.y) * zoom;

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

它会在选择中选择最大的可能区域，以保持目标缩略图的纵横比并在需要时放大它。您可以使用fixedHeight、fixedWidth 设置目标缩略图大小

Answer 3

渲染函数中的以下更改将创建一个以选择的中心点为中心的 100 像素正方形，或者尽可能靠近图像限制（我不确定如何从此处参考原始图像的宽度和高度） .

...
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
...

Answer 4

如果同时修复高度和宽度，预览会看起来失真。所以我会推荐 只固定高度。

  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 demo 中的结果。