Kevin Powell - Community•3mo ago

Defer sizing to parent element

I am looking for something that I thought I saw in one of Kevin's (recent) videos. Possibly could have been on a blog though (or State of CSS survey but I went through it again and couldn't find it). It was a (new I think?) CSS property/value that changed the sizing of an element to be defined by the parent. Say for example you have the following:

<div>
  <p>Some text here.</p>
  <img src="example.png" />
</div>

<div>
  <p>Some text here.</p>
  <img src="example.png" />
</div>

Is there a CSS property that defers sizing to the parent div such that setting the img to height: 100% makes the height of the image match the height of the p ?

4 Replies

Rägnar O'ock•3mo ago

https://www.youtube.com/live/r7m3Ka2LmPM?si=gJcUUwDsmb0RmUDO&t=1015 this ?

Kevin Powell

YouTube

The State of CSS 2025 survey

👉 https://survey.devographics.com/en-US/survey/state-of-css/2025?source=kevin_powell👉 https://piccalil.li/blog/wed-love-to-know-your-thoughts-with-the-picc...

Rägnar O'ock•3mo ago

timestamped to the relevant section

ghostpelicanOP•3mo ago

Legend that was it thanks!

Kevin Powell•3mo ago

If you'd like it broken down a bit more: https://jeffbridgforth.com/having-figure-match-width-of-contained-image/

Jeff Bridgforth

Having figure match width of contained image

Earlier this week, I explored a solution to center an image and caption by making the figure take on the width of the image even when the caption was longer than the image. I wanted the caption to wrap if needed. I asked several other CSS wizards to weigh in.

Gaming

Programming

Defer sizing to parent element

Did you find this page helpful?