I need assistance with setting up cards in React-Bootstrap. The Card component is enlarging my images beyond their original sizes. When I attempt to place the image in an img tag outside of the card, it displays at its normal size. Can someone provide guidance on how to prevent the image from stretching? I am using code example from React-Bootstrap's 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>