如何实现图片散射式布局并适配小屏幕显示？

问题根源梳理 #

1. 父容器section#about的position属性拼写错误（relaitve→relative），导致内部绝对定位元素的参照容器失效
2. 绝对定位元素脱离文档流，section没有被内容撑开，手机端高度塌陷
3. 图片使用固定像素尺寸，手机屏幕宽度不足时直接占满可视区域
4. 位移使用基于自身尺寸的百分比，小屏幕下位移逻辑不符合需求
5. #dbi的内联样式中z-index:1后缺少分号，导致display:flex不生效

修复后代码 #

HTML（清理内联样式，修正拼写）

<section id="about">
  <div class="text-container" data-aos="fade-up" data-aos-duration="700" data-aos-easing="ease-in" data-aos-once="true">
    <h2 id="dreambig">Dream Big.</h2>
    <p id="dbt" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in" data-aos-once="true" data-aos-delay="50">
      <span>We all dream.</span> Maybe you wanted to become a doctor. A research scientist. An astronomer. A mathematician. But oftentimes, in your curious pursuit for knowledge, no one was there to guide you. Maybe no one was there to teach you college-level physics when you really wanted to become an engineer, and you gave up on your dream. This is a big problem. <span>Well, not so much anymore with Pandorax.</span>
    </p>
  </div>
  <div id="dbi" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in" data-aos-once="true" data-aos-delay="100">
    <img id="dreambigimg1" src="assets/webstuff/indbg1.png">
    <img id="dreambigimg2" src="assets/webstuff/indbg2.png">
    <img id="dreambigimg3" src="assets/webstuff/indbg3.png">
    <img id="dreambigimg4" src="assets/webstuff/indbg4.png">
    <img id="dreambigimg5" src="assets/webstuff/indbg5.png">
  </div>
</section>

CSS（添加响应式逻辑，修复布局）

/* 基础布局 */
#about {
  position: relative;
  padding: 4rem 2rem; /* 撑开容器高度，避免塌陷 */
  min-height: 80vh; /* 保证容器最小高度，适配不同屏幕 */
  overflow: hidden; /* 隐藏超出容器的图片部分 */
}

.text-container {
  position: relative;
  z-index: 5; /* 确保文字在图片上方 */
}

#dreambig {
  margin-bottom: 1.5rem;
}

#dbt {
  font-size: 2.25rem;
  margin-left: 7%;
  margin-right: 20%;
  color: #706d69;
  margin-bottom: 2%;
  font-weight: bold;
}

#dbt span {
  color: #fff;
}

#dbi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: brightness(30%);
}

/* 桌面端图片样式 */
#dbi img {
  position: absolute;
}

#dreambigimg1 {
  height: 300px;
  width: 300px;
  transform: translateX(45%);
  top: 10%;
}

#dreambigimg2 {
  height: 400px;
  width: 400px;
  transform: translateX(25%);
  top: 50%;
}

#dreambigimg3 {
  height: 300px;
  width: 300px;
  transform: translateX(-20%);
  top: 0;
  right: 20%;
}

#dreambigimg4 {
  height: 300px;
  width: 300px;
  transform: translateX(-5%);
  top: 60%;
  right: 10%;
}

#dreambigimg5 {
  height: 250px;
  width: 250px;
  transform: translateX(10%);
  top: 30%;
  right: 0;
}

/* 手机端响应式适配 */
@media (max-width: 768px) {
  #dbt {
    font-size: 1.25rem; /* 缩小字体 */
    margin-left: 5%;
    margin-right: 5%; /* 减少左右边距 */
  }

  #dbi img {
    /* 统一缩小图片尺寸 */
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
  }

  /* 调整手机端图片的位置和位移 */
  #dreambigimg1 {
    transform: translateX(10%);
    top: 5%;
  }

  #dreambigimg2 {
    transform: translateX(5%);
    top: 40%;
    max-width: 220px;
    max-height: 220px;
  }

  #dreambigimg3 {
    transform: translateX(0);
    top: 10%;
    right: 5%;
  }

  #dreambigimg4 {
    transform: translateX(0);
    top: 55%;
    right: 0;
  }

  #dreambigimg5 {
    transform: translateX(0);
    top: 25%;
    right: 10%;
  }
}

关键优化点 #

• 给section#about设置padding和min-height，避免容器塌陷，保证手机端有足够的展示空间
• 把图片从flex布局改成绝对定位，更方便控制散射位置
• 使用媒体查询针对手机端调整字体大小、图片尺寸和位置，避免元素溢出
• 清理内联样式，统一用CSS管理，便于维护

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