I learn JavaScript React and now I have problem with positioning of images. I have a Codesandbox.

I learn from this MUI tutorial.

It should look like this:

In the Component FileEditor.jsx I load up the FileContentRenderer.jsx that can show both MP4 and Images, but images has problem. In the FileContentRenderer.jsx I try this:

  cardMedia: {
    width: "auto",
    height: "100%"
  }

That should show the image but not. Then I try this;

  cardMedia: {
    width: "100%",
    height: "50vh"
  }

That will display images in portrait but in landscape it does not show full image.

This viewer App can display MP4 and images and the MP4 is showing ok in landscape and portrait when using:

  viewerMp4: {
    width: "auto",
    height: "100%"
  },

So why does that not work with an image?