React-Bootstrap Cards Stretching Images

Question

I am simply trying to set up some cards in React-Bootstrap but the Card component is stretching my images way bigger than their original sizes. When I try putting the image in an tag outside of the card, the images display at their normal sizes. Can anyone help with advice on how to prevent the image stretching? I am simply using the code example from the React-Bootstrap website:

import 'bootstrap/dist/css/bootstrap.min.css';
import {Container, Row, Col, Card, Button} from 'react-bootstrap'
import './App.css';
import logo from "./Assets/Logo.png"
import talkie from "./Assets/Talkie.png"
import rabbit from "./Assets/Rabbit.png"
import shield from "./Assets/Shield.png"

function App() {
  return (
    <>
    
    <Container>
      <Row className="flex-nowrap">
        <Col md={6} sm={6} xs={6} align="left">
        <img  className="nav-logo img-fluid" src={logo}/> 
        </Col>   
        <Col md={6} sm={6} xs={6} className="contactLink" align="right">
          contact
          </Col>
      </Row>
      </Container>
    
      <Container className="px-4" style={{paddingTop: "3%"}}>
        <Row >
          <Col >
      <Card className="cards" style={{ width: '18rem' }}>
  <Card.Img variant="top" src={talkie}   />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
</Col>
   </Row>
  </Container>

Answer 1

So mainly what you need is to add the object-fit: none style property to the Image element inside your cards. This will prevent the image from resizing and it will maintain its original size.

You can read more about object-fit css property here https://www.w3schools.com/css/css3_object-fit.asp

Try the following code in your App.js

function App() {
  return (
    <>

      <Container>
        <Row className="flex-nowrap">
          <Col md={6} sm={6} xs={6} align="left">
            <img className="nav-logo img-fluid" src={logo} />
          </Col>
          <Col md={6} sm={6} xs={6} className="contactLink" align="right">
            contact
          </Col>
        </Row>
      </Container>

      <Container className="px-4" style={{ paddingTop: "3%", maxHeight: '14rem' }}>
        <Row style={{ maxHeight: '15rem' }} >
          <Col >

            {/* first card */}
            <Card className="cards" style={{ width: '18rem' }}>
              <div style={{ height: '120px', textAlign: 'center' }}>
                <Image src={talkie} style={{ objectFit: 'none', marginTop: '10px' }} alt="talkie" />
              </div>
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of
                  the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>
          <Col>

            {/* second card */}
            <Card className="cards" style={{ width: '18rem' }}>
              <div style={{ height: '120px', textAlign: 'center' }}>
                <Image src={shield} style={{ objectFit: 'none', marginTop: '15px' }} alt="talkie" />
              </div>
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of
                  the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>

          <Col>

            {/* third card */}
            <Card className="cards" style={{ width: '18rem' }}>
              <div style={{ height: '120px', textAlign: 'center' }}>
                <Image src={rabbit} style={{ objectFit: 'none', marginTop: '30px' }} alt="talkie" />
              </div>
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of
                  the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>

        </Row>
      </Container>
    </>
  )
}

You should see something like this:

Note: I added aditional styles and a div that wraps the Image element to improve the aesthetics of the cards.