如何实现图片与文本的响应式关联，适配任意屏幕尺寸

当前代码的问题在于：图片未设置响应式缩放规则，父容器的max-height限制了高度，导致屏幕尺寸变化时图片无法跟随容器自适应；同时文本是相对于父容器整体居中，而非绑定图片的位置，所以二者会出现错位。

修改后的代码 #

CSS 部分

.section2{
  padding-top: 20px;
  position: relative;
  /* 移除max-height限制，让容器高度随图片自动适配 */
}

.section2 img{
  padding: 20px;
  width: 100%; /* 图片占满容器宽度，实现响应式缩放 */
  height: auto; /* 保持图片原有宽高比 */
  box-sizing: border-box; /* 让padding包含在宽度内，避免容器溢出 */
}

.abtus {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 仅做水平居中，垂直位置绑定图片比例 */
  top: 30%; /* 调整百分比控制文本在图片上方的垂直相对位置 */
  width: 60%;
  font-size: 1rem;
  text-align: center;
  /* 移除固定padding-top，改用百分比top值保证相对位置稳定 */
}

HTML 部分（无需修改，保留原结构即可）

<div class="section2">
  <img src="assets/script.png" alt="">
  <div class="abtus">
    <h1>About Us</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
      repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
  </div>
</div>

关键修改说明 #

• 给图片添加width:100%和height:auto，让它随容器宽度自适应缩放，不再保持固定尺寸。
• 移除父容器的max-height，确保容器高度完全由图片高度决定，让文本的绝对定位基准与图片高度绑定。
• 将文本的垂直定位从固定padding-top改为百分比top值，仅保留水平居中的transform，这样图片缩放时，文本会始终保持在图片上方的相对位置。

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