FreeCodeCamp项目缩放及移动端访问时元素错位异常问题求助

问题根因 #

• 顶部标题定位参考系错误：position: relative 错误设置在图片元素上，未设置在标题的父容器#bts-wsj上，导致页面缩放时标题定位基准偏移
• 标题字号为固定像素值，屏幕尺寸变化时会溢出或错位
• 头像区域使用固定像素宽度，无法适配不同屏幕尺寸实现固定4+3布局
• HTML中存在未闭合的<a>标签，导致布局解析异常

修复后CSS代码 #

/* 父容器加relative作为定位基准 */
#bts-wsj {
  position: relative;
  width: 100%;
  line-height: 0; /* 消除图片默认下方留白 */
}
#img-div {
  max-width: 100%;
  height: auto;
}
#title {
  position: absolute;
  width: 100%;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Bodoni Moda", serif;
  /* 响应式字号，最小50px，最大200px */
  font-size: clamp(50px, 15vw, 200px);
  text-align: center;
  margin: 0;
 }
 /* 合并两个头像容器的重复样式 */
 .members-container {
  width: 100%;
  background: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /* 均匀排列子元素 */
  padding: 20px 0;
}
.smaller-image {
  /* 固定第一行4张，宽度设为22%留布局空隙 */
  width: 22%;
  max-width: 200px;
  /* 保证圆形不变形 */
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* 第二行3张单独设宽度 */
#members2 .smaller-image {
  width: 30%;
}
.border {
  border-width: 0px;
  border-radius: 50%;
}
/* 头像对应文字居中 */
.members-container a {
  text-align: center;
  text-decoration: none;
  color: inherit;
}

修复后HTML代码 #

<div class="container" id="bts-wsj">
  <img id="img-div" src="https://i.imgur.com/Th9Y0WO.jpg" alt="BTS-WSJ" style="width: 100%;">
  <h1 id="title">BTS</h1>
</div>
 
<div class="container members-container" id="members">
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/HuZWnjV.jpg" alt="jimin">
    <p>Jimin</p>
  </a>
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/yk5C7kz.jpg" alt="jungkook">
    <p>Jungkook</p>
  </a>
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/JBEGNJw.jpg" alt="jin">
    <p>Jin</p>
  </a>
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/7SJwU5t.jpg" alt="rm">
    <p>RM</p>
  </a>
</div>
   
<div class="container members-container" id="members2">
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/pOFFDdi.jpg" alt="j-hope" id="hobi">
    <p>J-Hope</p>
  </a>
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/tjMeZ9d.jpg" alt="v" id="v">
    <p>V</p>
  </a>
  <a href="#"><img class="smaller-image border" src="https://i.imgur.com/MNB1YBS.jpg" alt="suga" id="suga">
    <p>Suga</p>
  </a>
</div>

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