not able to change size of Image component using css
Unanswered
Bavarian Mountain Hound posted this in #help-forum
Bavarian Mountain HoundOP
I created an Image component and gave it height and width 100. now i want to change it size using css. but the size is not changing. it is still the 100x100 size.
the js code
the css code
the size is also not changing according to the viewport.
the js code
import Image from 'next/image';
import styles from './header.module.css';
import {ytIconPath,searchIconPath,navigationIconPath} from '../../static/images'
export function YoutubeIcon(){
return(
<div className={styles.title}>
<div className={styles.ytIcon}>
<Image src={ytIconPath}
height={100}
width={100}
alt="Youtube Icon"/>
</div>
YouTube
</div>
);
}
the css code
.title{
color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 3vw;
font-weight: bold;
display: flex;
align-items: center;
width: 30vw;
justify-content: space-around;
}
.ytIcon{
height: 2vw;
}
the size is also not changing according to the viewport.