Question

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

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

以下是代码＆amp;这是一个 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

为了实现您的目标，我将较大的图片重新编码为background-image的{{1}}，以便我可以正确地将desktop-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%);
}

使图像叠加响应

1 个答案: