Javascript 无法将内部图像放入此应用程序上的父容器中

我有一个非常基本的

ReactJS

组件，名为：

Designer

，它显示

埃菲尔铁塔

，还有一个底部面板，其中有一些控件

Designer

位于一个大小如下的

div

中：

{width:510px，height:300px}

埃菲尔铁塔的图像大小如下：

{宽度：300px，高度：800px}

这是

设计器的当前渲染输出：


但我的问题是，
Eiffel Tower
图像无法融入其父
div

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


如果在文件上：
/src/canvascorp/canvascorp
我们这样做：
让showImage=false，我们得到以下信息：


因此，我们确认其父级
div
（
green
background）会相应地调整大小，并具有自己的
width
和
height
，无论图像是否显示

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

/src/canvascorp/canvascorp
：

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;

这里有
CodeSandbox.io
您可以尝试：


请您，提供上述
CodeSandbox.io
的叉子，将
埃菲尔铁塔
安装到其父
div
中，而无需手动设置固定的
宽度/高度

旁注：如果我们使用
横向
图像而不是
纵向
图像，那么它也应该适合其父
div
而不超出其限制

示例图像（大小：
{宽度：800px，高度：300px}
）：



谢谢
 如果我正确理解您的问题，您的
.partial designer画布上似乎缺少一个
高度：100%

在这里，试试这个：


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

.partial designer canvas{height:calc（100%-60px）}

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);