相对图像绝对定位2个格的问题

Question

使用Bootstrap 4，我有一个响应图像，最初将其设置为2000px X 500px，我想在其确切的左右区域中放置2 ul文本（它将是动态文本），并将文本保留在同一位置当浏览器调整大小时。

使用文本div上的相对图像div和绝对值，我可以一开始就正确地放置文本，但是当调整浏览器的大小时，LH文本块会表现良好，但是右手文本块会向上爬（3rem）并向左移动（7rem）1900和1400px。就像RH块不遵循CSS transform：translate规则一样，CSS显示-webkit-transform：translate（10％，12％）;作为礼物。有人可以在这里给我一些指示吗？

.heroimg {
    position: relative;
}

.heroimg img {
    height: 100%;
    width: 100%;
}

.noticeboard {
    list-style-type: none;
}

.newstext {
    position: absolute;
    top: 60%;
    left: 15.8%;
    transform: translate(-60%, -15.8%);
    -moz-transform: translate(-60%, -15.8%);
    -webkit-transform: translate(-60%, -15.8%);
}

.nbtext span {
    color: black;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    letter-spacing: -1px;
    font-family: "Comic Sans MS";
    padding: 10px;
    display: inline-block;
}

.eventstext {
    position: absolute;
    bottom: 10%;
    right: 12%;
    transform: translate(10%, 12%);
    -moz-transform: translate(10%, 12%);
    -webkit-transform: translate(10%, 12%);
}

<div class="container-fluid">
    <div class="heroimg">
        <picture>
            <source
                srcset="img/posts2000x500.jpg"
                media="(min-width: 1400px)"
            />
            <source
                srcset="http://placehold.it/1400x500"
                media="(min-width: 1000px)"
            />
            <source srcset="http://placehold.it/1000x500" media="(min-width: 769px)" />
            <source srcset="http://placehold.it/800x500" media="(min-width: 577px)" />
            <img
                class=" img-fluid w-100 d-inline"
                srcset="http://placehold.it/600x500"
                alt=""
            />
        </picture>

        <div class="newstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot News</li>
                    <li>Interesting Topical News</li>
                    <li>Amazing News</li>
                    <li>Fantastic News</li>
                    <li>Boring News</li>
                </ul></span
            >
        </div>
        <!--/newstext-->

        <div class="eventstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot Events</li>
                    <li>Interesting Topical Event</li>
                    <li>Amazing Event</li>
                    <li>Fantastic Event</li>
                    <li>Boring Event</li>
                </ul></span
            >
        </div>
        <!--/eventstext-->
    </div>
    <!--/heroimg-->
</div>
<!--/container-fluid-->

Answer 1

除非我缺少某些东西，否则这一切似乎都太复杂了？