html - 如何保持两张图像响应良好地相互重叠？

Question

我有两张图片，我想将它们重叠但在它们之间放置一个轻微的偏移量，并在屏幕较小时减小图像尺寸。

我成功地为一个媒体查询做了，但是其他的在屏幕尺寸改变时并不稳定!

那么我怎样才能将两个图像以较小的偏移量放在彼此的顶部，并在屏幕尺寸发生变化时调整它们的大小？

您可以在图片中看到我的工作版本，以及我为最小屏幕尺寸为 1300px 时编写的代码。

Here you can see the two images

<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 );
    }
  }
}

Answer 1

这是一个可能的解决方案。由于图像的 aspect-ratio，您只需调整响应式容器的宽度即可避免拉伸(stretch)问题。请注意，50px 是图像之间的轻微偏移(在本例中 X 轴和 Y 轴上相同)。所以你可以把它放在一个(或两个)css/scss var(s) 上并使用这些值。

.container {
  position: relative;
  width: 380px;
  height: 180px;
}
.container img {
  position: absolute;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  object-fit: cover;
  box-shadow: 0 6px 20px 0 rgba(21, 24, 23, 0.44);
}
.container img.image1 {
  bottom: 0;
  left: 0;
}
.container img.image2 {
  right: 0;
  top: 0;
}
@media (min-width: 720px) {
  .container {
    width: 480px;
    height: 280px;
  }
}
@media (min-width: 1300px) {
  .container {
    width: 580px;
    height: 380px;
  }
}

<div class="container">
  <img class="image1" src="https://picsum.photos/500/300" />
  <img class="image2" src="https://picsum.photos/500/300" />
</div>