One of the challenges I encountered involved a vertically aligned card group containing a card with an image:
https://i.stack.imgur.com/w9Jkf.jpg
This is the React code snippet that was causing the issue:
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>
)
}Unfortunately, when the length of the text exceeds the height of the image, the image does not stretch to accommodate it:
https://i.stack.imgur.com/9bMO7.jpg
I am seeking advice on how to address this issue. Thank you.