Question

我有两个图像，我想将它们重叠，但是要在它们之间稍加偏移，并在屏幕较小时减小图像尺寸。

我成功进行了一种媒体查询，但是当屏幕尺寸改变时，其他媒体并不能完全稳定！

那么，如何在屏幕尺寸改变时将两个图像以很小的偏移量彼此重叠并调整大小？

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

<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即可调整响应容器的宽度，以避免拉伸问题。请注意，50px是图像之间的微小偏移（在这种情况下，在X和Y轴上相同）。因此，您可以将其放在一个（或两个）css / scss var上并使用这些值。

.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>

如何使两幅图像彼此反应良好地重叠？

1 个答案: