使图像叠加响应

Question

我通过将带有position:absolute 的图像放在另一个图像上，创建了一个简单的图像叠加层。

当我调整窗口大小时，图像叠加层会失去其初始位置，导致两个图像分开。我需要它们保持在同一个位置，直到屏幕达到移动宽度。

下面是代码&这里是codepen。

HTML -

<div class="projects">
  <div id="images" class="stella">
    <div class="desktop-image">
      <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg">
    </div>
    <div class="mobile-image-stella">
      <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg">
    </div>
  </div>
  <div id="images" class="scf">
    <div class="desktop-image">
      <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg">
    </div>
  </div>
  <div id="images" class="misma">
    <div class="desktop-image">
      <img src="http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg">
    </div>
    <div class="mobile-image-misma">
      <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg">
    </div>
  </div>
</div>

CSS -

.projects {
  width: 100;
  margin: 0 auto;
}

#images {
  text-align: center;
  padding-bottom: 230px;
}

#images img {
  width: 50%;
  height: 50%;
  border: 5px solid #0f0f10;
}

.mobile-image-stella {
  width: 30%;
  position: absolute;
  top: 112%;
  left: 22%;
}

.mobile-image-misma {
  width: 30%;
  position: absolute;
  top: 332%;
  left: 22%;
}

这是我尝试解决问题的媒体查询

@media (min-width: 900px) and (max-width: 1428px) {
  .mobile-image-stella {
    width: 30%;
    position: absolute;
    top: 112%;
    left: 22%;
  }

  .mobile-image-misma {
    width: 30%;
    position: absolute;
    top: 332%;
    left: 22%;
  }
}

Answer 1

为了实现您想要的，我将较大的图像重新编码为desktop-image 的background-image，以便我可以正确地将position:relative 给它。只需将较小的图像作为较大图像的子图像，并使用position:absolute 将其定位到正确位置即可。

这应该使较小图像的位置“静态”，即使调整浏览器大小。如果我误解了什么，只需评论它，我会相应地编辑

.desktop-image {
  background-image: url('https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d');
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 5px solid #0f0f10;
  position: relative;
}

.desktop-image>img {
  width: 30%;
  border: 5px solid #0f0f10;
  position: absolute;
  top: 100%;
  left: 10%;
  transform: translate(0, -50%);
}

<div class="images">
  <div class="desktop-image">
    <img class="mobile-image-stella" src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
  </div>
</div>