Next.js Discord

Discord Forum

not able to change size of Image component using css

Unanswered
Bavarian Mountain Hound posted this in #help-forum
Open in Discord
Avatar
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(){
    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.

0 Replies