Image Caption width of Image
Well hello everyone,
I have a given size (fullscreen modal) in which I want to show an Image as large as possible. That would be easy with object-fit: contain but unfortunately the image also needs a caption below it, that should have the width of the image itself. If the image was always landscape that would be easy, but it might have any aspect ratio.
I added an image how its supposed to look like and I have a codepen, where I tried around with grid and flex, but couldn't find a solution.
Thank you for your ideas 👍️
https://codepen.io/tobiaswust/pen/rNoEYXV
9 Replies
honestly, if i were you, i would just cut my losses, force a maximum height on the image and then just center the caption
you will be fighting a lot
also would make the caption a tiny bit bigger
Does the
div with the class alles have to have a height of 500px?yeah thats my problem. I think I will have to tell the client, that there is no reasonable solution to that. I was puzzling a couple hours today like "there must be something"
thats just a random height to simulate a fullscreen
there must be something else
but if you say "any aspect ratio", then you have to support EVERY ASPECT RATIO
which is not realistic
limit the height to 100dvh - 1.5rem and the width to 100dvw. if you must fill the entire area
I would say put both of them in a div , do some display flex
the semantic element would be a <picture> but you can probably bash it to work the same
Even with that I don't see at the moment how I can have the caption have the same width as the image
display block
i will be honest: its a very very bad idea
if you get a vertical phone photo, and a kinda long description, it will cause issues
that is why i suggest just centering it
more often than not, it will be enough
In the end I just decided to solve it with js. Thanks everyone for participating