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 样式属性添加到卡片中的图像元素。这将防止图像调整大小并保持其原始大小。

您可以在此处 https://www.w3schools.com/css/css3_object-fit.asp

阅读有关 object-fit css 属性的更多信息

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

你应该看到这样的东西：

注意：我添加了额外的样式和一个 div 来包装 Image 元素以改善卡片的美观。

React-Bootstrap 卡片拉伸图像

React-Bootstrap Cards Stretching Images

javascript

css

reactjs

react-bootstrap

bootstrap-4