Quiero hacer clic en las imágenes para abrir un modal como vistas previas de imágenes, por lo que el modal no tiene margen y el relleno solo muestra una vista previa de imagen completa.

Pero el problema que tengo es el tamaño de la imagen...

Inicialmente, después de hacer clic en el botón de apertura modal, obtengo el ancho y el alto de las imágenes y sobrescribo los valores de ancho y alto.

Pero algunas imágenes tienen 5000px width x 3000px height , lo que es demasiado grande para una pantalla y uso esta vista previa de imagen no solo para computadoras portátiles sino también para iPad o pantallas más grandes.

¿Cómo se define el tamaño de la imagen para diferentes tamaños de pantalla?

Ahora los valores de ancho y alto están fijos.

Si el ancho es mayor que , establezco un width 800 px y un height 500px de 500 px.

Si la altura es mayor que el ancho, establezco width 500px y height 800px .

y estilo object-fit: cover pero la posibilidad es que la imagen sea cuadrada...

 const Attachment =() =>{ const [width, setWidth] = React.useState(0); const [height, setHeight] = React.useState(0); const handleOpenModal = () => { setOpenModal(true); getMeta(attachmentCdnUrl); }; function getMeta(url) { const img = new Image(); img.addEventListener('load', function () { setWidth(800); setHeight(500); if (this.naturalWidth > this.naturalHeight) { setWidth(800); setHeight(500); } else { setHeight(800); setWidth(500); } }); img.src = url; } return( ... <Modal open={openModal} onClose={handleCloseModal} aria-labelledby="child-modal-title" aria-describedby="child-modal-description" > <Box sx={{ ...style, // here to overwrite width and height width: width, height: height, }} > <img src={attachmentCdnUrl} // here to overwrite width and height style={{ ...style, width: width, height: height, }} /> </Box> </Modal> ... ) }

Este código no se ve exactamente igual, por lo que simplemente pegarlo no funcionará.