如何在React Bootstrap中让卡片不受文本影响保持相同尺寸？

要解决卡片因图片、文本差异导致的尺寸不一致问题，试试这几个方案：

方案1：利用Bootstrap内置类实现等高卡片 #

给卡片添加h-100类让它占满所在列的高度，同时统一图片布局，再用Flex布局对齐内容：

<Row>
  <Col>
    <Card className="h-100">
      <StaticImage
        src="../images/example1.svg"
        alt="banner image"
        placeholder="blurred"
        layout="fullWidth"
      />
      <Card.Body className="d-flex flex-column">
        <Card.Title>Example 1</Card.Title>
        <Card.Text className="flex-grow-1">
          <p className="text-muted">
            This is example 1
          </p>
        </Card.Text>
      </Card.Body>
    </Card>
  </Col>

  <Col>
    <Card className="h-100">
      <StaticImage
        src="../images/example2.svg"
        alt="banner image"
        placeholder="blurred"
        layout="fullWidth"
      />
      <Card.Body className="d-flex flex-column">
        <Card.Title>Example2</Card.Title>
        <Card.Text className="flex-grow-1">
          <p className="text-muted">
            THis is example 2
          </p>
        </Card.Text>
      </Card.Body>
    </Card>
  </Col>
</Row>

• h-100 强制卡片占满列的高度，Row里的列默认等高，所以两张卡片高度一致
• 统一StaticImage的layout为fullWidth，避免图片宽度差异
• d-flex flex-column和flex-grow-1让文本区域自动填充剩余空间，保证底部对齐

方案2：自定义CSS固定卡片尺寸 #

如果需要更精确的控制，写自定义样式固定卡片和图片区域的尺寸：

.custom-card {
  width: 100%;
  height: 400px; /* 根据需求设置高度 */
}

.card-img-wrapper {
  height: 200px; /* 固定图片区域高度 */
  overflow: hidden;
}

<Row>
  <Col>
    <Card className="custom-card">
      <div className="card-img-wrapper">
        <StaticImage
          src="../images/example1.svg"
          alt="banner image"
          placeholder="blurred"
          layout="fullWidth"
          style={{ height: '100%', objectFit: 'cover' }}
        />
      </div>
      <Card.Body>
        <Card.Title>Example 1</Card.Title>
        <Card.Text>
          <p className="text-muted">
            This is example 1
          </p>
        </Card.Text>
      </Card.Body>
    </Card>
  </Col>

  <Col>
    <Card className="custom-card">
      <div className="card-img-wrapper">
        <StaticImage
          src="../images/example2.svg"
          alt="banner image"
          placeholder="blurred"
          layout="fullWidth"
          style={{ height: '100%', objectFit: 'cover' }}
        />
      </div>
      <Card.Body>
        <Card.Title>Example2</Card.Title>
        <Card.Text>
          <p className="text-muted">
            THis is example 2
          </p>
        </Card.Text>
      </Card.Body>
    </Card>
  </Col>
</Row>

• objectFit: 'cover'保证图片在容器内按比例展示，不会拉伸变形

方案3：使用CardGroup组件 #

React Bootstrap的CardGroup会自动让组内卡片高度一致：

<CardGroup>
  <Card>
    <StaticImage
      src="../images/example1.svg"
      alt="banner image"
      placeholder="blurred"
      layout="fullWidth"
    />
    <Card.Body>
      <Card.Title>Example 1</Card.Title>
      <Card.Text>
        <p className="text-muted">
          This is example 1
        </p>
      </Card.Text>
    </Card.Body>
  </Card>

  <Card>
    <StaticImage
      src="../images/example2.svg"
      alt="banner image"
      placeholder="blurred"
      layout="fullWidth"
    />
    <Card.Body>
      <Card.Title>Example2</Card.Title>
      <Card.Text>
        <p className="text-muted">
          THis is example 2
        </p>
      </Card.Text>
    </Card.Body>
  </Card>
</CardGroup>

• CardGroup会自动协调卡片高度，无需额外设置样式，注意统一图片布局即可

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