ingrese la descripción de la imagen aquí Tengo una imagen svg en un componente React que sigue tratando de preservar la relación de aspecto cada vez que cambia la relación de aspecto del navegador. Estoy tratando de que sirva como imagen de fondo para una página de destino que cubra toda la pantalla. Aquí hay algunos de los componentes svg:

 const LandingPage = (props) => ( <svg viewBox='0 0 2560 1440' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' xmlSpace='preserve' style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: 1.5, }} {...props} >

Y el JSX:

 <div className='curtain_cover'> <LandingPage /> </div> <div className='main_content'> <Sidebar /> <Box>

Y algo de CSS:

 .curtain_cover { display: block; width: 100%; height: 100%; float: left; position: relative; z-index: 2; transition: all 1s ease-out; }

Para aclarar mejor el problema, me gustaría cambiar el tamaño de la imagen para que cubra toda la pantalla sin importar el tamaño del navegador. En este momento, parece mantener su relación de aspecto. Aquí hay una imagen para mostrar lo que quiero decir:

La parte gris debajo de la imagen debe estar oculta por toda la imagen, pero parece que no puedo lograr que cubra toda la pantalla.