Assume that This is my parent (Cards) component -

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

and here is the child (Cardshown) component -

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

I want to render different images through props which are different in size(height-width). But when I run the code those images are completely messed up.

I tried with

transform : scale(1)

property in CSS with img attribute but it's not working.

So is there any process through which I can modify the size of those images differently without croping those images?

here is two images I like to add - image1 & image2

Specifically, I want to ask if there is any process to target the props in CSS or if we can modify the size of these images differently using JavaScript or CSS.

As I read from your comment, you wan't to style your child component independently from your other components. Theres 2 way to do that

1. Pass classnames

You could add a "classname" property to your child component, which then will be applied to your parent. This way you pass the styles indirectly to the child component.

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="Hi"
               classname="scale" 
               detail="I am a Developer too"/>
           
        </div>
  )
}

export default Cards

Your child would apply these styles like this.

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

export default Cardshown

in your css you could do following:

.scale{
  scale: 1.1;
}

2. Pass a style object

You also could pass a style object, which will apply the styles directly to the element (not really pretty)

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="Hi"
               style={{scale: 1.1}}
               detail="I am a Developer too"/>
           
        </div>
  )
}

export default Cards

Your child would apply these styles like this.

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

export default Cardshown

Note that this is just a example. This WILL scale your entire div, so be aware of that

It also seems that you are struggling with styling your images in general. Try to giving your images a class and styling them with the width property.