如何在react bootstrap中保持图像和卡片的大小比例相同？

Question

我在垂直对齐的卡片组中有一张卡片：

​

​

react代码：

​

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中。

Answer 2

好的!但是，如果你想要有更高性能的图像，那么你应该考虑以下的宽度和高度值：

100px
33vw
20em
calc(50vw-10px)

换句话说：

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

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