Aprendo JavaScript React y ahora tengo un problema con el posicionamiento de las imágenes. Tengo un Codesandbox .

Aprendo de este tutorial de MUI .

Debe tener un aspecto como este:

En el Componente FileEditor.jsx cargo el FileContentRenderer.jsx que puede mostrar tanto MP4 como Imágenes, pero las imágenes tienen un problema. En FileContentRenderer.jsx intento esto:

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

Eso debería mostrar la imagen pero no. Entonces pruebo esto;

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

Eso mostrará imágenes en formato vertical, pero en formato horizontal no muestra la imagen completa.

Esta aplicación de visor puede mostrar MP4 e imágenes y el MP4 se muestra bien en modo horizontal y vertical cuando se usa:

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

Entonces, ¿por qué eso no funciona con una imagen?