Question 254892 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The thing is when you use images as props and you want to style those images independently you have to use props again. In my case -

    <Mycard img={image1} style01={{transform:scale(0.6)}} name={"Hello"} detail={"I am a Developer"}/>
<Mycard img={image2} style01={{transform:scale(1)}} name={"Hii"} detail={"I am a Coder"}/>

    I use style01 prop and inside that I give a value of transform scale. Then I called prop like this -

    <img src={props.Projectimg} style={props.style01} alt="#" />

    In that way I can modify every single image independently also later on I will add width property in the same way to scale those images properly.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search