javascripthtmlcssreactjs

How to target image props in css


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.


Solution

  • 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.