你可以把第一张图片作为背景图片，然后指定你想要的背景大小，然后把第二张图片添加到<div>元素中。

#bg-img{
  background-image:url('https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-color: #999;
}
#img-inside{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:15%;
}

<div id="bg-img">
  <img id="img-inside" src="https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="second-img" />
</div>

我只是在代码片段中创建了左边的div

* {
  margin: 0;
}

.checkoutWrapper {
  display: grid;
  grid-template-columns: 35% 25% 40%; /* create three columns to fit both images  */
}

.coverIMGLast {
  width: calc(100% - 195px); **/* give that illution of real overlapping */**
  height: 100vh; /* please don't delete this line */
  grid-column: 1 / 3; /* overlapping */
  grid-row: 1;
  object-fit: cover;
}
/* this .phone class should be dynamically  located partially on first image */
.phone {
  height: 90vh;
  width: 380px;
  grid-row: 1; /* setting the images on one track / row */
  grid-column: 1/3; /* overlaping */
  justify-self: end;
  transform: translateY(5vh);
}

.CheckoutProcess {
  padding: 5.8rem 0.5rem 6.4rem; /* Add normal padding to give that effect */
}

.someContent {
  border: 1px solid red;
}

@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }

  img {
    display: none;
  }

  .CheckoutProcess {
    padding: 0;
  }
}

<div class="checkoutWrapper">
  <img src="https://via.placeholder.com/300" class="coverIMGLast" />
  <img src="https://via.placeholder.com/300/ff0000" class="phone" />
  <div class="CheckoutProcess">
    <div class="someContent">
      <h1>Some heading</h1>
      <p> 
        Some text to go with the paragraph 
      </p>
    </div>
  </div>
</div>

https://react-2djy5g-tsheob.stackblitz.io/
正如你可以看到从上面的代码和链接你编辑的代码.
您只需要使用grid-column并处理模板列来创建一个重叠的幻觉，以创建一个类似于书的感觉。
与：

1. grid-template-columns: 35% 25% 40%;/* 创建三列以适合两个图像 */
2. grid-row: 1;/* 在一个轨道/行上设置图像 */
3. grid-column: 1/3;/* 重叠 */
4. justify-self: end;/* 将图像放在网格的右侧 */

使用下面的代码，你就得到了你想要的结构，你所要做的就是使用width，height等来制作你所需要的结构。

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items:center;
}

.checkoutImgs {
  position: relative;
}

img{
  object-fit:cover;
  display:block;
  height:100%;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
  
}

  
.phone {
  position: absolute;
  height: 80%;
  width:40%;
  top: 10%;
  right: 0;

}

.CheckoutProcess {
  padding: 1rem 2.4rem;
  display:grid;
  place-items:center
}

<div class="checkoutWrapper">
  <div class="checkoutImgs">
    <img
      src="https://images.unsplash.com/photo-1659592516254-c00ca7af3db4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
      class="coverIMGLast"
    />
    <img
      src="https://images.unsplash.com/photo-1659808749760-e5baf9c16f10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
      class="phone"
    />
  </div>

  <div class="CheckoutProcess">
    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page
    avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les
    années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
    réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles,
    mais s'est aussi adapté à la bureautique informatique
  </div>
</div>

您可以使用transform和aspect-ratio来实现以下结果：

.checkoutWrapper {
  display: grid;
  grid-template-columns: 30% 70%;
  height: 100vh;
}

.left {
  background-color: #baafa0;
  position: relative;
  
  background-image: url('https://picsum.photos/id/1028/200/300');
  background-size: cover;
}

.phone {
  height: 60%;
  aspect-ratio: 1/2;
  
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  
  border-radius: 15%;
}

.right {
  padding-left: calc(15vh + 1rem);
}

<div class="checkoutWrapper">
  <div class="left">
    <img class="phone" src="https://via.placeholder.com/300/444" />
  </div>
  <div class="right CheckoutProcess">
    <Content>
      <h1>Check Out</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda consectetur ducimus officiis dicta vero distinctio odio sit explicabo illum dolorem quasi facilis repellendus sapiente fuga corporis, iure dolore ad, quis quisquam? Dolorum nostrum, veritatis
        molestiae culpa maiores exercitationem cumque qui harum, unde est ratione doloremque necessitatibus et numquam itaque neque!
      </p>
    </Content>
  </div>
</div>

我编辑了你的code
你写的都是对的。
你只是忘记添加margin-left: 25%。无论你使用哪个屏幕，它总是部分位于第一个。（由中心）

看看这个代码，我为你创建了这个设计，可能会有帮助...
enter image description here

body {
        padding: 0;
        margin: 0;
    }

    .parent {
        display: flex;
        position: relative;
        align-items: center;
    }

    .left {
        width: 37%;
        background-color: blue;
        height: 100vh;
    }

    .right {
        width: 63%;
        background-color: red;
        height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-container {
        position: absolute;
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .image {
        height: 500px;
        width: 250px;
        background-color: grey;
        margin-left: 30%;
        border-radius: 20px;
    }

<body>

    <div class='parent'>
        <div class='left'></div>
        <div class='right'>
            <div>
                <h3>THis is a heading</h3>
                <p>this is a para</p>
                <p>this is a para</p>
                <p>this is a para</p>
            </div>
        </div>

        <div class="image-container">
            <div class="image"></div>
        </div>
    </div>

</body>