Question

我有一个非常基本的ReactJS组件，名为：Designer，它显示Eiffel Tower以及一个带有一些控件的底部面板。

Designer位于div内，其大小如下：{ width: 510px, height: 300px}。

Eiffel Tower图片的大小如下：{ width: 300px, height: 800px}。

这是Designer的当前渲染输出：

但是我的问题是Eiffel Tower图片无法适应其父级div。

我的目标是在下图中看到的内容：

如果在文件/src/CanvasCrop/CanvasCrop上执行：let showImage = false;，则得到以下信息：

因此，我们确认其父级div（背景green）的大小相应地具有其自己的width和height，无论图像是否显示。 / p>

以下是其源代码（原始）：

/src/CanvasCrop/CanvasCrop：

import React, { Component } from "react";
import "./CanvasCrop.scss";

class CanvasCrop extends Component {
  render() {
    let showImage = true;
    return (
      <div className="partial-designer-canvas-crop">
        <div>
          {
          showImage &&
          <img
            src="https://i.ibb.co/DKxRFtb/image.jpg"
            style={{
              maxWidth: "100%",
              maxHeight: "100%",
              transform: "scale(-50%, -50%)"
            }}
            alt="target"
          />
          }
        </div>
      </div>
    );
  }
}

export default CanvasCrop;

这是外部源代码：

/index.js：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.scss";
import Designer from "./Designer/Designer";

function App() {
  return (
    <div>
      <span class="title">Trying to fit Eiffel Tower</span>
      <div className="App"
      style={{
        // keep this as it is
        overflow: 'auto', 
        width: '510px',
        height: '300px',
      }}
    >
      <Designer />
    </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里有CodeSandbox.io可以尝试：

https://codesandbox.io/s/7jv56qr1yx

请问，您能提供上面CodeSandbox.io的叉子，并将Eiffel Tower插入其父div，而无需手动设置固定的{{1 }}？

旁注：：如果我们使用width / height图像代替portrait图像，那么它也应该适合其父landscape，而不会超出其限制。

示例图片（大小：div）：

https://i.stack.imgur.com/jUeCD.jpg

谢谢！

Answer 1

如果我正确理解了您的问题，则好像您在height: 100%上缺少.partial-designer-canvas。

在这里，尝试一下：

https://codesandbox.io/s/x664y69ow

我只更改了src/Canvas/Canvas.scss。您也可以为自己的工具栏添加一个计算，如下所示：

.partial-designer-canvas {height: calc(100% - 60px)}

无法在此ReactJS应用上将内部图像放入其父容器中

1 个答案: