我想为我的投资组合网站创建一个卡节。我在那些卡片上加了图片。现在我想在React JS中设置图像样式。具体来说，我想对这些图像使用不同的变换比例样式。我把这些照片当作 prop 。
问题是这些图像大小不同。我知道，如果我作物在一个较小的尺寸更大的图像，它将适合在卡根据我的代码。但我想风格的图像和设置较大的图像在一个小尺寸避免裁剪技术。

• 这里是当我使用相同的图像为所有卡 * -For same image
• 这里是当我使用不同的图像-* for Multiple Images看到的第一张卡的图像大小很大，所以所有较低的div渲染卡外。
  这里是同一个镜像的完整父组件JSX代码[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={Project} projname={"Fire Fighting Robot"} detail={"Arduino, Electronics, C Coding, Sensors, TeamLead"}/>
            <Mycard cardno='2'/>
            <Mycard name="Project" Projectimg={Project} projname={"Online VCD System"} detail={"HTML, CSS, SQL, Tomcat Server, Java, JDBC, TeamLead"}/>
            <Mycard cardno='4'/>
            <Mycard name="Project" Projectimg={Project} projname={"Water Garbage Cleaner"} detail={"Arduino, Electronics, C Coding, Sensors, Chemistry, TeamLead"}/>
            <Mycard cardno='6'/>
            <Mycard name="Project" Projectimg={Project} projname={"Smart Road"} detail={"Arduino, Electronics, Sensors, TeamLead"}/>
            <Mycard cardno='8'/>
            <Mycard cardno='9'/>
            <Mycard cardno='10'/>
        </div>
    </div>
  )
}

export default Cards

在代码中对多个图像所做的更改行-

<Mycard name="Project" Projectimg={Robot} projname={"Fire Fighting Robot"} detail={"Arduino, Electronics, C Coding, Sensors, TeamLead"}/>

这就是为什么我想用不同的方式来设计这些图像，这样我就可以控制大小。当我把它当 prop 用的时候我不知道该怎么做。

供参考-

• 子组件JSX代码[cardsshowed.jsx] -*

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

export default Cardshown

• 父组件CSS文件[cards.css] -*

.Cardsection{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
    margin-top: 38rem;
    overflow: hidden;
}

.cards-container{
    display: flex;
    align-items: center;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
    margin-left: 60px;
    margin-right: 60px;
}

.left-btn, .right-btn{
    width: 60px;
    position: absolute;
    border: none;
    background-color: rgba(255, 255, 255, 0);
}

.left-btn{
    right: 0;
}

.right-btn{
    left: 0;
}

.left-btn>h1, .right-btn>h1{
    font-size: 50px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.436);
    border-radius: 50px;
    color: white;
    width: 50px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

• 子组件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;
    gap: 20px;
}

.cards-shown>:nth-child(1){
    transform: scale(1);
    width: 70%;
}

.cards-shown>:nth-child(2){
    display: flex;
    position: absolute;
    margin-top: 1px;
    left: 88px;
    color: black;
    font-family: 'Lucida Sans';
    font-size: 20px;
    font-weight: bold;
}

.cards-shown>:nth-child(3){
    display: flex;
    margin-top: 45px;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: rgb(157, 63, 219);
}

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

.cards-shown>:nth-child(4){
    display: flex;
    justify-content: center;
    margin-top: 40px;
}