is it fine to explicitly set height: 120px for an image?
Kevin said don't use heights and don't use pixel units.
I want to create a grid of cards where the image is the same height and width for every card. Each card has an image and some text right below it. Unfortunetly all the images are either too tall or too short. I did manage to get a hold of the width by using
grid-template-column: repeat(auto-fit,minmax(300px,1fr)) but I'm not sure how to set the height. I was thinking of setting grid-auto-row: 500px or something but I remembered that setting height and px are bad.
Edit:
I guess what I'm asking is:
1. should I explicitly set a height on images
2. should the explicitly set height be in px or rem and why
3. is there a better way altogether to achieve same height cards across a grid.
17 Replies
You can make all images have the same height without having a fixed height if you use the aspect-ratio property instead, that's what i would recommend, and if you do, you should also add
object-fit:cover;
So you can for example do
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio Does this mean it's setting the height based on the width or setting the width based on the height?
The height will be adjusted automatically based on the width of the image to always maintain this 16:9 aspect ratio
@soma-foreever Here you have an example
https://codepen.io/tok124/pen/QwLgpWq
This is a pen i made a month ago. Should be somewhat similar to what you want
These images have different sizes
at least some of them do
thanks. I'll check it out.
yes it works
Awesome ! 😄
but it's basically like implicitly setting height on images
Yeah kinda, except that the height will change based on the width
are there any situations where would advice against using this method for setting height on images?
this does seem like a rock solid method of doing things
if you set height:500px and then you resize screen so the images is 100px wide, they would be 100x500 pixel which would just look extremly strange
I always use this for my images and videos.
The only time you should not use this is if you for some reason definitely do not want the image the maintain an aspect-ratio, but 99% of the time you want it to have an aspect ratio so yeah... You can basicly always stick to this
But probably if you make a navbar and you have a img as logo in navbar, you probably dont need this
In this case you can rather just set a fixed height and width, but well, that depends on how big the logo is, but navbar logos are usually rather small, so that should always be fine
1. should I explicitly set a height on images 2. should the explicitly set height be inso we went with the 3rd option but do you have an opinion on no.2?pxorremand why 3. is there a better way altogether to achieve same height cards across a grid.
Yeah well, you should avoid px unit in most cases. So i would advice you to rather use the rem unit, it works better between different devices, kevin has a video where he explains all this far better than i can ever explain it ^^
It was either that one or this https://www.youtube.com/watch?v=_-aDOAMmDHI
I cannot remember exactly
Kevin Powell
YouTube
CSS em and rem explained #CSS #responsive
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries.
The way the em unit is ...
I'll watch them. thanks
Sure, no problem 🙂