React中Props传入图片的差异化缩放样式实现咨询

我正在为作品集网站开发卡片组件，通过Props向子组件Cardshown传入不同尺寸的图片。希望不采用图片裁剪的方式，通过CSS的transform:scale属性为不同图片设置差异化样式，避免大尺寸图片导致卡片内下方元素溢出卡片范围，但不清楚如何针对Props传入的图片实现该需求。

1. 传递缩放比例Props实现差异化样式 #

在父组件调用子组件时，根据图片实际尺寸新增scaleRatio属性，子组件接收该属性后动态绑定到图片的样式上，实现精准缩放。

2. 优化卡片布局避免元素溢出 #

将卡片改为弹性布局，给图片单独设置容器并限制尺寸，确保缩放后的图片不会挤压下方文字元素，同时调整文字元素的定位方式，提升布局稳定性。

父组件（cards.jsx） #

import React from 'react'
import './Cards.css';
import Mycard from './Cardshown';
import Project from '../../Images/project.png';
import Robot from '../../Images/robot.png';
const Cards = () => {
  const leftbtn = () => {
    let box = document.querySelector('.cards-container');
    box.scrollLeft = box.scrollLeft + 600;
  }

  const rightbtn = () => {
    let box = document.querySelector('.cards-container');
    box.scrollLeft = box.scrollLeft - 600;
  }

  return (
    <div className='Cardsection'>
        <button className="left-btn" onClick={leftbtn}><h1>&lt;</h1></button>
        <button className="right-btn" onClick={rightbtn}><h1>&gt;</h1></button>
        
        <div className="cards-container">
            {/* 根据图片尺寸设置对应缩放比例 */}
            <Mycard 
              name="Project" 
              Projectimg={Robot} 
              scaleRatio={0.7}
              projname="Fire Fighting Robot" 
              detail="Arduino, Electronics, C Coding, Sensors, TeamLead"/>
            <Mycard cardno='2'/>
            <Mycard 
              name="Project" 
              Projectimg={Project} 
              scaleRatio={1}
              projname="Online VCD System" 
              detail="HTML, CSS, SQL, Tomcat Server, Java, JDBC, TeamLead"/>
            <Mycard cardno='4'/>
            <Mycard 
              name="Project" 
              Projectimg={Project} 
              scaleRatio={1}
              projname="Water Garbage Cleaner" 
              detail="Arduino, Electronics, C Coding, Sensors, Chemistry, TeamLead"/>
            <Mycard cardno='6'/>
            <Mycard 
              name="Project" 
              Projectimg={Project} 
              scaleRatio={1}
              projname="Smart Road" 
              detail="Arduino, Electronics, Sensors, TeamLead"/>
            <Mycard cardno='8'/>
            <Mycard cardno='9'/>
            <Mycard cardno='10'/>
        </div>
    </div>
  )
}

export default Cards

子组件（cardsshown.jsx） #

import React from 'react'
import './Cardshown.css';
const Cardshown = (props) => {
  // 默认缩放比例为1
  const scale = props.scaleRatio || 1;
  return (
    <div className='cards-shown'>
      <div className="card-img-container">
        <img 
          src={props.Projectimg} 
          alt="Project"
          style={{transform: `scale(${scale})`}}
        />
      </div>
      <span>{props.name}</span>
      <span className='span-hover'>{props.projname}</span>
      <span>{props.detail}</span>
    </div>
  )
}

export default Cardshown

子组件CSS（cardsshown.css） #

.cards-shown{
    position: relative;
    min-width: 250px;
    max-width: 300px;
    height: 300px;
    margin-right: 70px;
    border-color: rgb(255, 123, 0);
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    /* 改为弹性布局，垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 15px;
}

.card-img-container{
    /* 限制图片容器尺寸，避免缩放后溢出 */
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    overflow: visible;
}

.cards-shown img{
    /* 设置缩放原点为顶部居中，避免偏移 */
    transform-origin: center top;
}

.cards-shown>:nth-child(2){
    color: black;
    font-family: 'Lucida Sans';
    font-size: 20px;
    font-weight: bold;
}

.cards-shown>:nth-child(3){
    font-size: 22px;
    font-weight: bold;
    color: rgb(157, 63, 219);
    text-align: center;
}

.span-hover:hover{
    color: rgb(100, 5, 163);
    cursor: pointer;
}

.cards-shown>:nth-child(4){
    text-align: center;
    padding: 0 10px;
}

• 父组件中根据每张图片的实际尺寸设置scaleRatio，确保大图片缩小后不会超出卡片范围
• 子组件新增图片容器，配合transform-origin保证缩放时图片位置居中，不偏移
• 卡片改为弹性布局后，文字元素的定位更稳定，不会因图片缩放导致溢出

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