如何在React 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

好！但是，如果您想拥有更高性能的图像，则应考虑以下宽度和高度值：

100 像素 33vw 20 分 计算（50vw-10px）

换句话说：

cardImage: {
objectFit: 'cover',
borderRadius: 55,
width: '50vw',
height: '30vh'

}

以下是更多信息的参考：https://web.dev/serve-responsive-images/

Answer 2

好吧，我知道了，只需将height: '100%'添加到样式cardImage中即可。