Как сохранить размер изображения и карты в одинаковом размере bootstrap?

Question

У меня есть карта внутри вертикально выровненных групп карт:

Код реакции:

import React from 'react';

import { Container, CardGroup, Card, Row, Col } from 'react-bootstrap';

const styles = {
  card: {
    backgroundColor: '#B7E0F2',
    borderRadius: 55,
    padding: '3rem'
  },
  cardImage: {
    objectFit: 'cover',
    borderRadius: 55
  }
}

export default function FindingsPage() {
  return(
    <Container fluid>
      <CardGroup className="m-5 d-block">
        <Card className="m-5 border-0 shadow" style={styles.card}>
          <Row>
            <Col>
              <Card.Img src={require("../assets/images/findingsPage/EnglishesOfTheWorld.jpg")} style={styles.cardImage} />
            </Col>
            <Col>
              <Card.Body>
              <Card.Title as="h1">Englishes of the World</Card.Title>
              <Card.Text as="h4" style={styles.cardText}>
                How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz, which we are using to understand how grammar differs in different parts of the English-speaking world (USA, Ireland, Australia, etc.). We are also investigating how grammar is different for people who learn English later in life: Do they make different mistakes if their first language is German as opposed to Japanese?
              </Card.Text>
              </Card.Body>
            </Col>
          </Row>
        </Card>
      </CardGroup>
    </Container>
  )
}

Однако, когда длина текста превышает высоту изображения, изображение не растягивается:

Мне было интересно, есть ли способ это исправить? Спасибо.

Answer 1

Хорошо, я понял это, просто добавлю height: '100%' к cardImage в стилях.