如何实现div背景仅部分区域着色的响应式自适应效果

解决方案 #

问题根源 #

你当前遇到的黄色块高度不一致问题，核心原因是黄色块的百分比高度是相对各自包裹图片的父容器计算，两个卡片的图片高度本身不一样，自然得到的黄色块高度也不同。之前你用flex没生效，是因为给.col加了align-self: flex-end，导致flex布局下的两个列没有自动等高拉伸。

改造步骤 #

• 移除每个.col上的align-self: flex-end属性，让flex布局下的列默认按照最高内容等高对齐
• 给包裹图片和黄色块的相对定位容器设置height: 100%，同时通过padding-bottom预留下方职位文字的展示空间，避免重叠
• 给img标签外层加flex布局设置align-items: flex-end，保证所有图片靠容器底部对齐，高度不同的图片也能保持底部对齐的视觉效果

修改后完整代码 #

<div class="justify-content-center row row-cols-4" style="display: flex;">
  <div class="col" style="padding: 0px;">
    <!-- 给包裹层加高度100%，padding-bottom预留文字空间 -->
    <div style="position: relative; height: 100%; padding-bottom: 60px; display: flex; align-items: flex-end;">
      <img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;" />
      <!-- 黄色块高度现在基于统一的列高度计算，两个卡片高度一致 -->
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div>
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
  <div class="col" style="padding: 0px;">
    <div style="position: relative; height: 100%; padding-bottom: 60px; display: flex; align-items: flex-end;">
      <img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;" />
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div>
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
</div>

改造后两个列的高度会自动和最高的卡片对齐，黄色块的80%高度是基于统一的列高度计算，无需硬编码固定高度，窗口缩放时也能保持响应式效果。

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