Html 如何保持两幅图像相互重叠？

我有两个图像，我想重叠它们，但在它们之间有一个轻微的偏移，当屏幕变小时，也会减小图像大小

我成功地实现了一个媒体查询，但当屏幕大小改变时，其他媒体查询并不完全稳定

那么，当屏幕大小改变时，我如何将两个图像以较小的偏移量彼此重叠并调整它们的大小呢

您可以在图像中看到我的作品版本，以及我为最小屏幕大小为1300px时编写的代码

---

这里有一个可能的解决办法。考虑到图像的

纵横比

，您只需调整响应容器的宽度，以避免拉伸问题。 请注意，

50px

是图像之间的微小偏移（在本例中，X轴和Y轴上的偏移相同）。因此，您可以将它放在一个（或两个）css/scss变量上，并使用这些值

.container{
位置：相对位置；
宽度：380px；
高度：180像素；
}
.集装箱img{
位置：绝对位置；
宽度：计算（100%-50px）；
高度：计算（100%-50px）；
对象匹配：覆盖；
盒影：0 6px 20px 0 rgba（21,24,23,0.44）；
}
.集装箱图像1{
底部：0；
左：0；
}
.集装箱图像2{
右：0；
排名：0；
}
@介质（最小宽度：720px）{
.集装箱{
宽度：480px；
高度：280px；
}
}
@介质（最小宽度：1300px）{
.集装箱{
宽度：580px；
高度：380px；
}
}

使用

相对定位

定位两个。@ObsidManager我已经尝试过了，它不起作用，当两者都有相对位置时，它们不会重叠。但是谢谢

<div className="signatureContainer">
    <span className="imageContainer">
          <img className="image1" src="path1"  />
          <img className="image2" src="path2"  />
    </span>
</div>

// Predefined Break-points
$breakPoint-1: 1300px;
$breakPoint-2: 720px;
$breakPoint-3: 420px;

.signatureContainer {

  position: relative;

  .imageContainer{
  }

  img {
    box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
  }

  span:nth-child(1)  {
    position: absolute;
    // top: 35%;
    // left: 17%;
  }

  span:nth-child(2)  {
    position: relative;
    top: -100px;
    left: 15%;
  }
}


@media only screen and (min-width: $breakPoint-1) {

  .signatureContainer {


    img {
      box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
    }

    span:nth-child(1)  {
      position: absolute;
      // top: 35%;
      // left: 17%;
    }

    span:nth-child(2)  {
      position: relative;
      top: -100px;
      left: 15%;
    }
  }
}


@media only screen and (max-width: $breakPoint-1) {

  .signatureContainer {

    padding: 5em 0;
    margin-top: 3em;


    img {
      box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.36);
    }

    span:nth-child(1)  {
      position: absolute;
      top: 150px;
      left: 120px;
      // transform: translate( -60% , 10% );
      // transform: translate( -50px, 50px );
    }

    span:nth-child(2)  {
      position: relative;
      top: 5%;
      left: 5%;
      // transform: translate( 50px, -50px );
    }
  }
}