如何通过CSS/JS针对React组件Props中的图片调整尺寸？

父组件（Cards） #

import React from 'react'
import './Cards.css';
import Mycard from './Cardshown';
import image1 from '../../Images/project.png';
import image2 from '../../Images/robot.png';
const Cards = () => {
  return (
        <div className="img-section">
            <Mycard img={image1} name="Hello" detail="I am a Developer"/>
            <Mycard img={image2} name="Hii" detail="I am a Coder"/>
        </div>
  )
}

export default Cards

子组件（Cardshown） #

import React from 'react'
import './Cardshown.css';
const Cardshown = (props) => {
  return (
    <div className='cards-shown'>
      <img src={props.img} alt="#" />
      <span>{props.name}</span>
      <span>{props.detail}</span>
    </div>
  )
}

export default Cardshown

我想通过props给两张不同的图片设置不同的高度/宽度，不裁剪图片，但目前图片显示混乱，用transform: scale(1)也没效果。想问有没有办法通过JS/CSS结合props来差异化调整图片尺寸，同时保证图片不被裁剪。

解决方案 #

方法1：直接通过Props传递尺寸参数 #

在父组件中给每个Mycard传入尺寸属性，子组件接收后给img设置内联样式，核心用object-fit: contain保证图片完整显示不裁剪：

修改父组件

// Cards.jsx
<Mycard img={image1} name="Hello" detail="I am a Developer" width="200px" height="150px"/>
<Mycard img={image2} name="Hii" detail="I am a Coder" width="180px" height="220px"/>

修改子组件

// Cardshown.jsx
const Cardshown = (props) => {
  return (
    <div className='cards-shown'>
      <img 
        src={props.img} 
        alt="#" 
        style={{
          width: props.width,
          height: props.height,
          objectFit: 'contain' // 按比例缩放，完整显示图片
        }}
      />
      <span>{props.name}</span>
      <span>{props.detail}</span>
    </div>
  )
}

方法2：通过Props传递自定义类名 #

把样式写在CSS文件中，通过props给不同图片分配专属类名：

修改父组件

// Cards.jsx
<Mycard img={image1} name="Hello" detail="I am a Developer" imgClass="card-img-large"/>
<Mycard img={image2} name="Hii" detail="I am a Coder" imgClass="card-img-small"/>

修改子组件

// Cardshown.jsx
const Cardshown = (props) => {
  return (
    <div className='cards-shown'>
      <img 
        src={props.img} 
        alt="#" 
        className={props.imgClass}
      />
      <span>{props.name}</span>
      <span>{props.detail}</span>
    </div>
  )
}

在Cardshown.css中添加样式

.card-img-large {
  width: 200px;
  height: 150px;
  object-fit: contain;
}

.card-img-small {
  width: 180px;
  height: 220px;
  object-fit: contain;
}

方法3：使用CSS变量（动态灵活） #

通过父组件传递CSS变量，子组件样式直接引用变量值，无需修改子组件JSX：

修改父组件

// Cards.jsx
<Mycard 
  img={image1} 
  name="Hello" 
  detail="I am a Developer" 
  style={{
    '--img-width': '200px',
    '--img-height': '150px'
  }}
/>
<Mycard 
  img={image2} 
  name="Hii" 
  detail="I am a Coder" 
  style={{
    '--img-width': '180px',
    '--img-height': '220px'
  }}
/>

修改Cardshown.css

.cards-shown img {
  width: var(--img-width);
  height: var(--img-height);
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者Random dev.