如何确保Text始终位于Image的顶部（即使调整大小时）？

Question

状况：

我的网站有以下结果：

问题：

我想在iPad图片上添加内容，以便内容始终在＆＃34;内部＆＃34; iPad的屏幕（即使调整窗口大小）。

问题：

怎么能实现呢？我用谷歌搜索解决方案，没有人帮助我。是否有一些属性可以使div捕捉到图像？

CODE：

HTML：

<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" >
            <img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
        </div>
    </div>
</section>

CSS：

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;
}

Answer 1

根据我的理解，你会看到iPad图像中的文字。如果是这种情况，请尝试将图像设置为background-image：

<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>

CSS。

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

}

将正确的图片宽度添加到max-width