Issue
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><</h1></button>
<button className="right-btn" onClick={rightbtn}><h1>></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;
}
Solution
Later I figured out that for different sizes of images, you can't do all the images in the same sizes & height using an editor. It will messed up. rather what can you do is you can pass CSS values for every image of differently. You just need to know some JavaScript tricks.
Parent component-
<div className="cards-container">
<Mycard name="Project" img={Robot} style01={{transform : "scale(1.1)"}} width01={{width : "40%"}} projname={"Fire Fighting Robot"} detail={"Arduino, Electronics, C Coding, Sensors, TeamLead"}/>
<Mycard name = "Graduation" img={Grad} style01={{transform : "scale(1.1)"}} width01={{width : "44%"}} projname={"JISCE"} detail={"Electronics and Communication Engineering Department"}/>
</div>
See I am storing CSS properties in style01, width01 props & later I will call these props inside a function const combinedStyle in the child component. I called the function const combinedStyle inside return under the tag so that all the images will have specific & different values of transform & width property.
This trick is so useful that whenever you need to make any element or component dynamic you can use this trick. See I am also using other props for passing different string values into the specific card.
Child component-
import React from 'react'
import './Cardshown.css';
const Cardshown = (props) => {
const combinedStyle = {
...props.style01,
...props.width01,
};
return (
<div className='cards-shown'>
<img src={props.img} style={combinedStyle} alt="images" />
<span>{props.name}</span>
<span className='span-hover'>{props.projname}</span>
<span>{props.detail}</span>
</div>
)
}
export default Cardshown
see I wrote one function const combinedStyle & in the function I called style01 & width01 prop. Why I did that because for resizing those images it will not work only with transform property. I had to use width property also. So I combined these two in one place & called the function in style={} so that both will come.
Note that you have to connect all the files correctly & in main CSS file don't use style & width tag again for card images.If you want to differently style those images more way then use this trick & wrote props for each & every CSS property and called it into child component.
Answered By - Random dev.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.