html - 在响应图像上放置和缩放文本

Question

我想在图像(白色矩形所在的位置)上放置文本(我计划稍后动态生成此文本，因此它不在图像中)并使文本与响应图像一起缩放。我已成功将文本放置在图像上，但我无法将其与图像中应有的位置(白色矩形)对齐。

我意识到，如果我要使图像中的矩形位于中心，这会更容易，但是在这种情况下这不是一个选项。

如何将此文本保留在白色矩形中并使其随图像缩放？

编辑:抱歉，红色箭头是我目前正在设计的模型的占位符。

谢谢

p{
        z-index: 100;
        position: absolute;
        color: black;
        font-size: 24px;
        font-weight: bold;
        left: 150px;
        top: 275px;
    }

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center">
            <img src="https://i.imgur.com/sxnQAi2.png" class="object-contain max-h-full">
            <p id="text">Dynamic text!</p>
        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    </div>
</div>

Answer 1

    <script src="https://cdn.tailwindcss.com"></script>
    <div class="flex flex-wrap w-full justify-center content-center px-12">
        <div class="flex flex-wrap lg:items-center min-h-screen">
            <div class=" relative flex flex-col w-full lg:w-1/2 justify-center">
                <img src="https://images.unsplash.com/photo-1625838144804-300f3907c110?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="object-contain max-h-full">
                <p id="text" class="absolute text-white top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4">Dynamic text!</p>
            </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
        </div>
    </div>

如果您使用 tailwind css，则在父级中提供相对位置，在动态文本中添加类绝对位置并按照我的说明提供转换。