Make images of different aspect ratio the same size
I don't know how to make these images the same size so that they have a same size container, I have a width of 30% on my .game span that contains the image but do I need to add a height ?? If so I don't know what units to put, every solution keep telling me to put pixels but I feel like it's a big no no.
https://codepen.io/Antony-Collin/pen/WNYejKZ
3 Replies
your codepen isn't really useful for this problem, there's no images. If you use something like picsum.photos, you can have images with arbitrary sizes and put them in as stand-ins:
https://picsum.photos/480/320
https://picsum.photos/108/192
(it would be useful if you put those into your codepen, so other people don't have to)
you can set a max-height on the image, and you can use whatever unit you want.
rem will scale with font-size if a user has a custom one set, so that's usually what I default to
alternatively you can set a height on your span or the parent of the span, and set max-height on the image to 100%