Kevin Powell Media Inc.
Responsive Design
CSS
July 16, 2025
When an image is wrapped in a figure element and the figure also contains a figcaption element, the width can be inconsistent. The figure will either use the width of the image, or if there a lot of text in the caption, the width will be based on the text. Let’s explore some techniques to “ignore” an element’s width to create more consistent layouts.
🔗 Links
CodePen Solutions:
https://jeffbridgforth.com/having-figure-match-width-of-contained-image/
Latest
Popular