how to show full image when resizing react

Question

I'm React Beginner, i have two questions, first question: here i'm using 'allotment' to split two images (resize), you can change the size of images by pulling from middle of those two images

my problem here is, when i'm pulling to left or right to see whole picture, it does not show whole picture it goes over the bottom of page, any idea why?

Second question: below the images I have div which shows with height: 93%`

my question is why height:93 shows the div and height: 100% won't ? shouldn't height:100% take the rest of space left?

try it here: https://codesandbox.io/s/ecstatic-star-1wxx12?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          side content
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "93%",
                    flexDirection: "column"
                  }}
                >
                  <div style={{ flex: "1" }}>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "93%",
                    flexDirection: "column"
                  }}
                >
                  <div style={{ flex: "1" }}>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>{" "}
        </div>
      </div>
    </div>
  );
}

English is not my mother language so there could be mistakes.

Answer 1

object-fit can help you with that

(Please remove all the styles you have given your images and apply these)

img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Video showing the solution a-work

---

"my question is why height:93% shows the div and height: 100% won't?
shouldn't height:100% take the rest of space left?"

If only width or height are defined without the other, the image's aspect ratio will be preserved and in your case, will result in an unwanted rendering outcome.

since your design have horizontal 2 panes, this leaves very little space for the image to span across the horizontal area, meaning the aspect-ratio of the viewable area is much higher than wide.

You almost always want to maintain the original aspect-ratio, especially for pictures.

---

Relevant links:

• https://stackoverflow.com/a/52682038/104380
• https://css-tricks.com/almanac/properties/o/object-fit/