Css 在库中同时使用横向和纵向图像时的文本定位

使用fullpage.js作为水平图库，我想将文本框（见图）与图库中的每个图像对齐。问题在于图像大小不同，当浏览器窗口大小改变时，文本不会保持在原来的位置

HTML

---

发布你的htmlcode@AnuragDaolagajao使用

上的
max width
和
文本框容器上的
宽度：100%
来解决此问题code@AnuragDaolagajao使用
上的
max width
和文本框容器上的
width:100%
解决此问题
<div class="gallery-item">

    <div class="gallery-item__textbox">
        <h1>Title</h1>
        <p>Text</p>
    </div>

    <img class="gallery-item__image" src="image.png" alt="image">

</div>

.gallery-item {

    &__textbox {
        position: absolute;
        width: calc(100vw/2); // ?
        bottom: 20%;
    }

    &__image {
        margin: 0 auto;
        width: auto;
        max-height: 100%;
    }
}