React-Bootstrap 卡片拉伸圖像

Question

我只是想在 React-Bootstrap 中設置一些卡片，但 Card 組件將我的圖像拉伸得比它們的原始尺寸大得多。 當我嘗試將圖像放在卡片外部的標簽中時，圖像以正常大小顯示。 任何人都可以提供有關如何防止圖像拉伸的建議嗎？ 我只是使用來自 React-Bootstrap 網站的代碼示例：

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

因此，您主要需要的是將object-fit: none樣式屬性添加到卡片中的 Image 元素。 這將防止圖像調整大小並保持其原始大小。

您可以在此處閱讀有關object-fit css 屬性的更多信息https://www.w3schools.com/css/css3_object-fit.asp

在您的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>
    </>
  )
}

你應該看到這樣的東西：

注意：我添加了額外的 styles 和一個包裝Image元素的div以提高卡片的美感。