如何让两个div高度匹配更高元素（React+React Bootstrap场景）

AI 小北

2026-9-25

解决方案

实现思路

React Bootstrap 的 Row 组件默认使用flex布局，默认情况下同行的所有Col高度会自动对齐到最高子元素的高度，我们可以直接复用这个特性实现需求，无需额外写JS监听元素高度。

具体修改步骤

给外层Row添加align-items-stretch类（Bootstrap内置工具类），确保两个列高度完全一致
给图片所在的Col设置相对定位，同时添加你需要的最小高度限制
给img标签设置绝对定位，宽高占满父级Col，用object-fit控制图片适配规则避免变形

修改后的JSX代码

<Row className={[stylesParagraph.pardiv, stylesParagraph.bodyWidth, 'align-items-stretch']}>
        
        <Col className={stylesParagraph.baseCol} xs={12} sm={12} md={12} lg={{span:12  , order:props.order}} xl={6} >
          <div className={stylesParagraph.par}>
           {/*  <h2 className={ stylesParagraph.title}>{props.title}</h2> */}
           <p className={stylesParagraph.paragraph}>{props.text}</p> 
          </div>
        </Col>
        <Col className={[stylesParagraph.imgCol, stylesParagraph.imgWrapper]} xs={12} sm={12} md={12} lg={12} xl={6}>
          <img
            className={stylesParagraph.img}
            src={props.img}
            alt=""
          />
        </Col>
      </Row>

配套CSS（对应你的stylesParagraph模块）

/* 图片外层Col的样式 */
.imgWrapper {
  position: relative;
  min-height: 240px; /* 此处替换为你需要的最小高度数值 */
}

/* 图片样式 */
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 自适应填满容器、不变形，超出部分裁剪；如果要完整显示图片可改为contain */
  object-fit: cover;
}