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
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;
}
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
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.