Невозможно поместить внутреннее изображение в родительский контейнер в этом приложении ReactJS

Question

У меня есть один очень простой компонент ReactJS, который называется: Designer, который отображает Eiffel Tower, а также нижнюю панель с некоторыми элементами управления.

Designer находится внутри div со следующим размером: { width: 510px, height: 300px}.

Изображение Eiffel Tower имеет следующий размер: { width: 300px, height: 800px}.

Это текущий обработанный вывод Designer:

Но моя проблема в том, что Eiffel Tower изображение не вписывается в его родительский div.

Myцель - это то, что вы видите на следующем изображении:

Если в файле: /src/CanvasCrop/CanvasCrop мы делаем: let showImage = false;,мы получаем следующее:

, поэтому мы подтверждаем, что его родительский div (green фон) имеет соответствующий размер, имеющий свой собственный width и height независимо от того, показывается изображение или нет.

Вот его исходный код (оригинал):

/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 без установки вручную фиксированного width / height?

Примечание: , если вместо portrait изображения мы используем landscape изображение, он также должен вписываться в родительский элемент div, не выходя за его пределы.

Пример изображения (размер: { width: 800px, height: 300px}):

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