如何让容器内图片合理排布并实现全设备响应式适配？

针对蓝色图片容器的响应式需求，以下是具体优化方案、媒体查询调整要点，以及避免图片堆叠的解决方法：

一、最佳响应式实现方案 #

1. 替换固定单位为相对单位：将所有px单位替换为rem或vw，确保元素尺寸随根字体大小/视窗宽度自适应。
2. 容器高度自适应：移除.promo-container的固定height:75rem，改用min-height或让内容撑开高度，避免小屏幕下内容溢出。
3. 图片自适应定位：将图片的固定top/left/right/bottom像素值改为百分比或相对单位，确保图片在容器内的相对位置保持一致。

二、媒体查询的关键调整 #

根据不同设备断点（平板、手机），调整以下内容：

• 平板设备（≤768px）
  • 将.promo的flex-direction改为column，让文字区和图片区上下排列
  • 缩小.promo-info的内边距与文字大小
  • 让.promo-info-container和.promo-images的宽度改为100%，高度自适应
• 手机设备（≤480px）
  • 进一步缩小文字尺寸、按钮内边距
  • 调整图片的定位百分比，确保在小容器内不重叠
  • 移除.promo-container的左右内边距，或改为小数值的相对单位

三、避免图片堆叠的核心方法 #

当前图片堆叠的根源是固定像素定位，窗口缩小时图片的绝对位置无法自适应容器尺寸，解决方法：

1. 使用百分比定位：将top:69px改为top:8%，left:86px改为left:10%这类相对值，让图片始终保持与容器边缘的相对距离
2. 限制图片最大尺寸：给每张图片设置max-width: 40%（根据实际设计调整），避免小屏幕下图片尺寸过大导致重叠
3. 中心图片优先适配：.promo_center保持transform: translate(-50%,-50%)的居中方式，同时设置max-width: 60%，确保它始终是视觉核心且不遮挡其他图片

修改后的完整代码 #

<div class="promo-container">
  <div class="promo">
    <div class="promo-info-container">
      <div class="promo-info">
        <h1>Banking Should Be Easy.</h1>
        <p>financial transactions without interet using a mobile device such as a smartphone or tablet with bluetooth. </p>
        <a href="#">Get started</a>
      </div>
    </div>
    <div class="promo-images">
      <img class="promo-bottom-left" src="./img/promo/promo-bottom-left.png" alt="">
      <img class="promo-top-left" src="./img/promo/promo-top-left.png" alt="">
      <img class="promo-top-right" src="./img/promo/promo-top-right.png" alt="">
      <img class="promo_center" src="./img/promo/promo_center.png" alt="">
      <img class="hard-bottom-right-mask" src="./img/promo/hard-bottom-right-mask.png" alt="">
    </div>
  </div>
</div>

/* 基础样式 */
.promo-container {
  width: 100%;
  min-height: 75rem;
  padding-left: 5vw;
  padding-right: 5vw;
  box-sizing: border-box;
}
.promo {
  display: flex;
  min-height: 100%;
}
.promo-info-container {
  width: 50%;
  background-color: #F3F4FF;
  display: flex;
  align-items: center;
}
.promo-info {
  padding: 10rem 5rem;
  box-sizing: border-box;
}
.promo-info h1 {
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 4.5rem;
  color: #000;
  margin-bottom: 2rem;
}
.promo-info p {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: 0.015em;
  color: #363D70;
  margin-bottom: 4rem;
}
.promo-info a {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5rem;
  font-size: 1.2rem;
  color: #FAFCFF;
  letter-spacing: 0.04em;
  padding: 1.5rem 3rem;
  background-color: #3C50E0;
  border-radius: 1rem;
}
.promo-images {
  position: relative;
  width: 50%;
  min-height: 75rem;
  background-color: #3C50E0;
  overflow: hidden;
}
.promo-images > * {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}
.promo-top-left {
  top: 8%;
  left: 10%;
  max-width: 35%;
}
.promo-bottom-left {
  left: 5%;
  bottom: 12%;
  max-width: 30%;
}
.promo-top-right {
  right: 0;
  top: 15%;
  max-width: 35%;
}
.promo_center {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 60%;
  z-index: 2;
}
.hard-bottom-right-mask {
  bottom: 12%;
  right: 8%;
  background-color: #0C1229;
  border-radius: 1rem;
  max-width: 25%;
}

/* 平板媒体查询 */
@media screen and (max-width: 768px) {
  .promo {
    flex-direction: column;
  }
  .promo-info-container, .promo-images {
    width: 100%;
    min-height: 50vh;
  }
  .promo-info {
    padding: 6rem 3rem;
  }
  .promo-info h1 {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}

/* 手机媒体查询 */
@media screen and (max-width: 480px) {
  .promo-container {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .promo-info {
    padding: 4rem 2rem;
  }
  .promo-info h1 {
    font-size: 2rem;
    line-height: 2.8rem;
  }
  .promo-info p {
    font-size: 1rem;
    line-height: 1.8rem;
  }
  .promo-info a {
    padding: 1.2rem 2.5rem;
    font-size: 1rem;
  }
  .promo-top-left {
    top: 10%;
    left: 8%;
    max-width: 40%;
  }
  .promo-bottom-left {
    left: 5%;
    bottom: 10%;
    max-width: 35%;
  }
  .promo_center {
    max-width: 70%;
  }
}

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