Actualmente tengo un componente de banner de video héroe que estoy construyendo. Al banner de video héroe se le ha dado una altura de 100vh. En la parte superior del banner de video principal, estoy colocando una superposición de imágenes. Estoy notando que en tamaños de pantalla con menos altura, la superposición de imágenes parece cortarse. Vea la captura de pantalla adjunta para ver a qué me refiero.

Como puede ver, la mitad inferior de la superposición de imágenes se corta por completo. Me pregunto si hay una manera de garantizar que la superposición de imágenes ya no se corte en estos tamaños de pantalla con menos altura. Sospecho que el uso de 100vh podría ser el problema aquí. A continuación se muestra el código que se utiliza:

componente de vídeo:

 const VideoBanner = (props: IVideoBAannerProps) => { return ( <div className={css.videoContainer}> <video playsInline autoPlay muted loop> <source src={props?.video} type='video/mp4' /> </video> <div className={css.overlay}> <img className={css.img} src={props?.overlayImg} /> </div> </div> ) } export default VideoBanner

Estilos de banner de video:

 .videoContainer { video { position: relative; width: 100%; object-fit: cover; height: calc(100vh - 134.5px); display: block; } .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(39, 39, 39, 0.5); } .img { position: absolute; top: 35%; left: 4%; } } @media screen and (max-width: 1199px) { .videoContainer { .img { position: absolute; top: 45%; left: 4%; } } } @media screen and (max-width: 1199px) { .videoContainer { video { height: calc(100vh - 125px); } } } @media screen and (max-width: 767px) { .videoContainer { .img { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); width: 70%; } } }