Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
19 replies
Ozzo

How to create a responsive card with an image ?

Hello, I would like to create cards to display projects I have worked on for my portfolio. I would like to create something like that.

My problem is mainly with the images, I don't really know how to display them properly on different screen sizes.

I have tried to give them a certain height in % but it messes the height of the card. I have tried to give them a fixed height in rem but it's not really responsive even with media queries.
If I set a height of 100%, the image become too big in big smartphone/tablets

Do you guys have any ideas how I can implement that ?

Here is my code : 
<div className={classes.card}>
                    <Image src={newsHomepageImg} alt="page d'accueil du site d'information" className={classes.mainImg} />
                    <div className='d-flex gap-05 align-items-center'>
                        <Image src={frontendmentorLogo} className={classes.logo} alt="logo de l'entreprise frontendmentor.io" />
                        <div className={classes.text}>
                            <p className={classes.title}>Page d'accueil d'informations</p>
                            <p className={classes.description}>Frontend mentor</p>
                        </div>
                    </div>
                    <div className='d-flex w-100'>
                        <a className={classes.button} href="https://lordyner.github.io/news-homepage/" target="blank">
                            Visitez le site
                        </a>
                    </div>
                </div>


.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) -6px -1px 1px -17px;
    transition: .2s ease-in-out;
    color: #fff;
    border: 1px solid #fff;

}

.mainImg {
    object-fit: cover;
    width: 100%;
    height: 10rem;
    aspect-ratio: 2.5;
}
Was this page helpful?