Kevin Powell - Community•12mo ago

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>

<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;
}

.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;
}

13 Replies

clevermissfox•12mo ago

Use aspect ratio instead of height or use grid Grid cell will set the size of your element

OzzoOP•12mo ago

Where should I use grid ? Because each card is already a flexbox

MarkBoots•12mo ago

its okay to be flex/or grid (doesn't matter much in this scenario), just set the image width to 100% with an aspect-ratio of 16/9 (for example). and to be sure make it object-fit: cover. (don't set a height)

OzzoOP•12mo ago

but if I don't set the height, I have this result. The card is then really long. I don't know if it's because I use next.js, because when I check my dom, I see the image has a width and height, but I didn't set it

clevermissfox•12mo ago

Image reset may help too

img {
max-width:100%;
display: block; 
}

img {
max-width:100%;
display: block; 
}

You need to take the width and height attributes off of your img tag in the html , then set aspect-ratio in your css And object-fit: cover as mark said

OzzoOP•12mo ago

I have already set object-fit : cover

MarkBoots•12mo ago

wonder where the height is coming from, it should be adjusting to the flex-container with the 100% width. can't see it in the html

clevermissfox•12mo ago

You gotta take off the width and height attributes from the tag

OzzoOP•12mo ago

I think it's because of Next.js . Because it uses image optimization and normally you have to set width and height attirbutes

MarkBoots•12mo ago

you could try height: unset in the css

OzzoOP•12mo ago

because here I don't, so maybe it uses the width and height of the image by default oh yeah it seems to be good I will play a bit with it and see if it's fine, thank you

MarkBoots•12mo ago

np, good luck on the project!

OzzoOP•12mo ago

I have another problem that I don't know if is possible to solve easily. My three cards are in a grid layout, with 1fr 1fr 1fr, but for some resolutions, the title of the first spread on two lines and so the card is bigger, but it creates a blank in the other ones. I have tried to set align-items: center in the grid, but then the two last cards are smaller than the first one

Gaming

Programming

How to create a responsive card with an image ?