如何实现两张图片叠加并适配屏幕尺寸？

你的问题核心是容器未做响应式适配，且叠加图用固定单位定位，导致屏幕缩放时无法和背景图保持相对位置。以下是修正方案：

问题分析 #

1. 容器.img-container设置了固定宽度800px，无法随屏幕宽度缩小，背景图缩放时容器边界不变
2. 叠加图.overlay-img使用rem固定值定位，相对的是容器，但容器不响应时，位置不会随背景图比例调整

修正后的代码 #

CSS 部分

.img-container {
  position: relative;
  max-width: 800px; /* 最大宽度限制，适配大屏幕 */
  width: 100%; /* 小屏幕下占满父容器宽度 */
  margin: 0 auto; /* 可选，让容器居中显示 */
  aspect-ratio: 1000/1000; /* 匹配背景图的宽高比（这里是1:1），确保容器比例和背景图一致 */
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，保持图片比例填充容器，避免拉伸 */
  display: block; /* 去掉图片默认的行内底部间距 */
}

.overlay-img {
  position: absolute;
  /* 用百分比定位，相对于容器的宽高，随容器缩放自动调整位置 */
  top: 20%; /* 根据你的需求调整百分比，替代固定的10rem */
  left: 60%; /* 根据你的需求调整百分比，替代固定的45rem */
  width: 25%; /* 叠加图宽度设为容器的百分比，保持缩放比例 */
  height: auto;
  z-index: 2;
}

HTML 部分

<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/200/300" alt="">
  </div>
</section>

关键调整说明 #

• 容器响应式：用max-width + width:100%实现容器在大屏幕保持最大宽度，小屏幕自动收缩
• 比例锁定：aspect-ratio让容器和背景图保持相同比例，避免背景图拉伸或容器高度异常
• 百分比定位：叠加图用百分比替代固定单位，确保其相对于背景图的位置始终一致，无论屏幕如何缩放

如果需要更精确的位置，可以结合calc混合百分比和固定值，比如top: calc(20% + 1rem)，但优先用百分比保证适配性。

内容的提问来源于stack exchange，提问作者CarnationDoe