HTML实现自适应图叠在文字之上

此效果比较难以形容，以至于不懂得如何搜索，自己写出点想法，请大家帮忙完善。

没有使用psd设计稿上的图片，我就简单的截图实现：

首先，此处要求是图在文之上，且伴随着不同浏览器的大小，将正常显示图文。

我的想法：

1.将图片当做背景来使用，这样宽度改变了，图片还是不会变化

    css3中，存在object-fit这个属性，我现在使用的是 object-fit: cover；

2.设定一个绝对定位元素,position: relative;

3.将文字块以及图片进行相对定位，position: absolute;

以下是代码部分：

//css部分

<style>

      .box{

            width: 100%;

            eight: 675px;

            margin-top: 100px;

      }

      .box .txt-box {

            width: 500px;

            height: 500px;

            margin: 0 auto;

            position: relative;

      }

      .box .txt-box .txt-box-t{

            position: absolute;

            width: 100%;

            height: 336px;

            border-radius: 10px;

            background-color: #dbb583;

            opacity: 0.6;

            color: #000;

      }

      .box .txt-box .txt-box-i{

            position: absolute;

            width: 300px;

            height: 200px;

            left: 300px;

            top: 100px;

      }

      .box .txt-box .txt-box-i img {

            width: 100%;

            height: 200px;

           object-fit: cover;

      }

</style>

//html部分

<div class="box">

      <div class="txt-box">

            <div class="txt-box-t">我在底下</div>

            <div class="txt-box-i">

                  <img src="./test.jpg" alt="sky">

            </div>

      </div>

</div>