如何实现图片上方文字对齐并保证页面响应式？HTML CSS开发求助

问题根源 #

你出现错位的核心原因有两个：

1. 相对定位加错了元素：position: absolute的元素会以最近一个设置了position: relative的父级元素为定位参照物，你把relative属性写在了img标签上，但文字是img的兄弟节点，所以文字实际是相对于整个页面根元素定位的。窗口尺寸变化时图片高度会自适应调整，但文字的固定top值不会变，自然就会错位跑到下一张图片下方。
2. 全用固定像素值：你写的top: 200px、top:250px、width: 660px都是固定值，不同屏幕尺寸下图片宽高比例会变，固定位置和宽度的文字必然会超出范围或者错位。

修正方案 #

首先给每个包裹图片和文字的col-lg-12容器加自定义类img-text-wrapper，同时把同组的标题和段落放在同一个文字容器里方便统一管理，修改后的代码如下：

修正后HTML代码 #

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 img-text-wrapper">
            <img class="bg_image"  src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
            <div class="text-content">
                <h2 class="Lorem_Headding">Lorem ipsum </h2>
                <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 img-text-wrapper">
            <img class="bg_image"  src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
            <div class="text-content">
                <h2 class="Lorem_Headding">Lorem ipsum </h2>
                <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
            </div>
        </div>
    </div>
</div>

修正后CSS代码 #

/* 父容器加相对定位，作为文字的定位参照物 */
.img-text-wrapper {
  position: relative;
  padding: 0 !important; /* 消除Bootstrap默认的col内边距，避免图片两侧留白 */
}

/* 图片设置为响应式，撑满父容器宽度 */
.bg_image {
  width: 100%;
  height: auto;
  display: block; /* 消除img标签默认的底部3px空白间隙 */
}

/* 统一管理文字的定位，全用百分比适配不同屏幕 */
.text-content {
  position: absolute;
  top: 20%; /* 相对父容器高度的百分比，位置会随图片高度自适应 */
  left: 5%; /* 相对父容器宽度的百分比 */
  width: 60%; /* 宽度用百分比，避免超出屏幕范围 */
  color: #fff;
}

/* 移除原来写死的固定定位和宽度，只保留文字样式和间距 */
.Lorem_Headding {
  margin: 0 0 1rem 0;
}
.p-text {
  margin: 0;
  line-height: 1.5;
}

适配优化 #

如果小屏幕下文字太多显示不全，可以加媒体查询调整移动端的文字大小和位置：

@media (max-width: 768px) {
  .text-content {
    width: 90%;
    top: 15%;
    font-size: 0.9rem;
  }
}

如果不需要保留img标签的语义（比如不需要SEO抓取该图片），也可以把图片设置为父容器的background-image，配合background-size: cover适配，写法更简单，无需处理img标签的默认间隙问题。

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