Styling images differently as props

Question

I want to create a card section for my portfolio website. I added images with those cards. Now I want to style images in React JS. Specifically, I want to use transform scale style for those images differently. I used those images as props.

The thing is these images are different in size. I know if I crop the bigger images in a smaller size it will fit in cards as per my code. But I want to style images & set bigger images in a small size avoiding crop technique.

Here is when I use the same image for all cards - For same image

Here is when I use different images - for Multiple Images See for the first card The image size is big so all the lower divs render outside the card.

Here is the full parent component JSX code[cards.jsx] for same image -

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

Changes line made in code for multiple images-

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

That's why I want to style these images differently so that I can control size. Now I didn't know how to do that when I used it as props.

For reference -

Child component JSX code [cardsshown.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

Parent Component CSS file [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;
}

child component CSS file [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;
}