I am working on project(social media web app), where user has permission to upload variety of media. I will explain problem with example, let's say I have div of 500px*300px and I am getting images of various dimensions, it could be portrait or landscape or could be small images like 50px*50px. I want to fit such image in fixed size div, without losing its aspect ratio or without getting it cropped or without getting stretched. I tried with css properties but none of them seems to work fine with all type images, I am struggling to find solution for this.

Component to render image:

```js
import React, { useRef } from "react";

export default function Example(props) {
  const myRef = useRef(null);
  const [dimensionofImg, setDimensionofImg] = React.useState(null);
  const [dimensionsofDiv, setDimensionsofDiv] = React.useState(null);
  const [imagedimensions, setImagedimensions] = React.useState(null);

  React.useEffect(() => {
    setDimensionsofDiv({
      width: myRef.current.offsetWidth,
      height: myRef.current.offsetHeight
    });
  }, []);

  React.useEffect(() => {
    let dimensionTocompare;
    if (
      dimensionofImg &&
      dimensionofImg.width < dimensionofImg &&
      dimensionofImg.height
    ) {
      dimensionTocompare = dimensionsofDiv.width;
      let changedWidth =
        (dimensionTocompare * dimensionofImg.width) / dimensionofImg.height;
      setImagedimensions({
        maxWidth: "",
        maxHeight: "100%",
        width: changedWidth,
        height: ""
      });
    } else if (
      dimensionofImg &&
      dimensionofImg.width > dimensionofImg &&
      dimensionofImg.height
    ) {
      dimensionTocompare = dimensionsofDiv.height;
      let changedHeight =
        (dimensionTocompare * dimensionofImg.height) / dimensionofImg.width;
      setImagedimensions({
        maxWidth: "100%",
        maxHeight: "",
        width: "",
        height: changedHeight
      });
    }
    else if (
      dimensionofImg && dimensionofImg.width == dimensionofImg && dimensionofImg.height
    ) {

      setImagedimensions({
        maxWidth: "100%",
        maxHeight: "100%",
        width: "",
        height: ""
      });
    }
  }, [dimensionofImg, dimensionsofDiv]);

  function renderContent() {
    return (
      <div>
        width of div: {dimensionsofDiv.width}
        <br />
        height of div: {dimensionsofDiv.height}
      </div>
    );
  }

  return (
    <div>
      {dimensionsofDiv && renderContent()}
      dimensions of image width{dimensionofImg && dimensionofImg.width}, height
      {dimensionofImg && dimensionofImg.height}
      <div
        style={{ height: 500, width: 300, border: "solid 1px red" }}
        ref={myRef}
      >
        <img
          style={{
            maxWidth: `${imagedimensions && imagedimensions.maxWidth}`,
            maxHeight: `${imagedimensions && imagedimensions.maxHeight}`,
            width: `${imagedimensions && imagedimensions.width}`,
            height: `${imagedimensions && imagedimensions.height}`
          }}
          onLoad={(e) => {
            setDimensionofImg({
              width: e.currentTarget.offsetWidth,
              height: e.currentTarget.offsetHeight
            });
          }}
          alt=""
          src={props.src}
        />
      </div>
    </div>
  );
}
```

```js
import "./styles.css";
import Example from "./component"
const src = "https://picsum.photos/100/800/?random";

export default function App() {
  return (
    <div className="App">
      <Example src={src}/>
    </div>
  );
}
```