如何将图像位置固定在另一张图像上

Question

我有以下代码（也粘贴在下面），我想在其中制作两列的布局。在第一个中我放置了两个图像，在第二个中显示了一些文本。

在第一列中，我想要第一张图像width:70%和第二张图像position:absolute。最终结果应该是这样的

正如您所看到的，在上面的每个屏幕中，第二个图像部分位于第一个图像中768px。

我可以在第一个图像上部分定位第二个图像，但这不是动态的，如果您更改屏幕尺寸，您可以看到它是如何折叠的。

但无论我如何努力，我都达不到这个结果。

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

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

/* this .phone class should be dynamically  located partially on first image */
.phone {
  position: absolute;
  height: 90%;
  top: 5%;
  bottom: 5%;
  margin-left: 18%;
}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
}

.someContent {
  border: 1px solid red;
}

/* removing for demo purposes
@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">
    <Content />
  </div>
</div>

Answer 1

您可以使用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>