Kevin Powell - Community•14mo ago

Creating a responsive figure with caption, without using layout models (i.e grid, flexbox)

Say you have a parent container of a fixed height but variable width. The parent contains an image and caption. The caption height is set to min-content and will wrap as the parent width's decreases. Can you set the image to fill all the available height, using 'classical' css properties and without overflow?

<figure>
  <img />
  <figcaption>This text will wrap at some point.</figcaption>
</figure>

<figure>
  <img />
  <figcaption>This text will wrap at some point.</figcaption>
</figure>

2 Replies

MarkBoots•14mo ago

no, that results in a vicious circle. for example, if the width of the image decreases, the caption gets narrower and potentially higher (wrap), which results in less space for the image height, which also decrease the width again. (ratio)

blkbull77•3mo ago

I was wonder how to do this in flex of grid.

Gaming

Programming

Creating a responsive figure with caption, without using layout models (i.e grid, flexbox)