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

Question

I have one very basic ReactJS component called: Designer which displays the Eiffel Tower as well as a bottom panel with some controls in it.

The Designer is inside a div with the following size: { width: 510px, height: 300px} .

The Eiffel Tower image has the following size: { width: 300px, height: 800px} .

This is the current rendered output of the Designer :

But my problem is that the Eiffel Tower image is not getting fit into its parent div .

My goal is what you can see on the following image:

If on the file: /src/CanvasCrop/CanvasCrop we do: let showImage = false; , we get the following:

so, we confirm that its parent div ( green background) gets sized accordingly having its own width and height whether the image is getting shown or not.

Here is its source code (original):

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

Here is the outer source code:

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

Here you have the CodeSandbox.io you can experiment with:

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

Could you please, provide back a fork of the above CodeSandbox.io with the Eiffel Tower fitted into its parent div without setting manually a fixed width / height ?

Side note: if instead of a portrait image, we use a landscape image, it should also fit into its parent div without going beyond its limits.

Example image (size: { width: 800px, height: 300px} ):

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

Thanks!

Answer 1

If I understand your problem correctly, it looks like you are missing a height: 100% on your .partial-designer-canvas .

Here, try this:

https://codesandbox.io/s/x664y69ow

I only changed src/Canvas/Canvas.scss . You can add a calc to account for your tool bar too, like so:

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