Next.js Discord

Discord Forum

not able to change size of Image component using css

Bavarian Mountain Hound posted this in #help-forum
Open in Discord
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

import Image from 'next/image';
import styles from './header.module.css';

import {ytIconPath,searchIconPath,navigationIconPath} from '../../static/images'

export function YoutubeIcon(){
        <div className={styles.title}>
            <div className={styles.ytIcon}>
                <Image src={ytIconPath}
                    alt="Youtube Icon"/> 

the css code

    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;

    height: 2vw;

the size is also not changing according to the viewport.

0 Replies