Me gustaría crear una imagen que abarque toda la pantalla al abrir mi sitio web por primera vez. Estoy usando reaccionar y material ui. Actualmente, mi JSX se ve más o menos así. He usado el tema de interfaz de usuario de material predeterminado.
<AppBar> //code in between </AppBar> <Container sx={{margin: '0px', padding: '0px'}}> <img src={headerPicture} style={{minHeight: '100vh', maxWidth: '100vw'}}/> </Container>El problema es que 100vh no tiene en cuenta la altura de la barra de la aplicación, por lo tanto, la imagen + la barra de la aplicación es más grande que la pantalla. Me imagino que tendría que hacer algo como esto:
<img src={headerPicture} style={{minHeight: '100vh - AppBarHeight', maxWidth: '100vw'}}/>donde AppBarWidth es igual a la altura de la barra de la aplicación a medida que cambia en respuesta.
¿Sabes cómo haría para averiguar la altura de la barra de la aplicación?
Logré esto en una aplicación configurando una altura fija en AppBar (puede responder) y aplicándola usando constantes.
export const APP_BAR_HEIGHT = 80; export const APP_BAR_HEIGHT_LG = 140; const AppBar = () => { return ( <div style={{ height: isLargeScreen ? APP_BAR_HEIGHT_LG : APP_BAR_HEIGHT}}> {/* app bar here */} </div> ); } export default AppBar;Luego importas y usas esas constantes en tu proyecto.
Además
escribir un gancho
const useWindowHeight = () => { const [height, setHeight] = React.useState(window.innerHeight); React.useEffect(() => { const handleResize = () => { setHeight(window.innerHeight); } window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); } }, []); return height; }Use este valor en lugar de vh, porque la altura de la ventana cambia en algunos dispositivos móviles mientras se desplaza. Al final, esto podría verse así:
import AppBar, { APP_BAR_HEIGHT, APP_BAR_HEIGHT_LG } from 'whateverpath'; // ... const windowHeight = useWindowHeight(); return ( <> <AppBar> //code in between </AppBar> <Container sx={{margin: '0px', padding: '0px'}}> <img src={headerPicture} style={{minHeight: windowHeight - APP_BAR_HEIGHT, maxWidth: '100vw'}}/> </Container> </> )