Javascript 如何确保文本始终位于图像顶部（即使在调整大小时）？

情况：

我的网站有以下结果：

---

问题：

我想在iPad图像的顶部添加内容，这样内容总是“在”iPad的屏幕内（即使在调整窗口大小时）

---

问题：

如何才能做到这一点？我在谷歌上搜索解决方案，但没有人帮我。是否有一些属性使div捕捉到图像

---

代码：

HTML:

---

据我所知，iPad图片中的文字是什么。如果是这种情况，请尝试将您的图像设置为背景图像：

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
           Some Text ...
        </div>
    </div>
</section>

---

将正确的图像宽度添加到

最大宽度
请添加您的代码，这将对您有所帮助。@frnt添加它。
section {
    height: 100vh;
    overflow: hidden;
    padding: 0%;
}

.rightPage {
    margin-top: 0%;
    height: 100vh;
    width: 50vh;
}

img {
    max-width: 100%;
    max-height: 95%;
    display: block;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-left: 0;
}

<section class="Contact" id="Contact">
    <div class="row">
        <div class="col span-1-of-2" >
            <h2> Contact </h2>
        </div>
        <div class="col span-1-of-2 rightPage" >
           Some Text ...
        </div>
    </div>
</section>

.rightPage {
     background-image: url("Vendors/Images/iPadContact.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    max-width: 517px;

}