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
clevermissfox11mo ago
Use aspect ratio instead of height or use grid Grid cell will set the size of your element
Ozzo
Ozzo11mo ago
Where should I use grid ? Because each card is already a flexbox
MarkBoots
MarkBoots11mo 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)
Ozzo
Ozzo11mo 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
clevermissfox11mo 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
Ozzo
Ozzo11mo ago
I have already set object-fit : cover
MarkBoots
MarkBoots11mo 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
clevermissfox11mo ago
You gotta take off the width and height attributes from the tag
Ozzo
Ozzo11mo 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
MarkBoots11mo ago
you could try height: unset in the css
Ozzo
Ozzo11mo 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
MarkBoots11mo ago
np, good luck on the project!
Ozzo
Ozzo11mo 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
Want results from more Discord servers?
Add your server