Make sure widget element is height of line it's in

1

I feel like this must be really obvious, but somehow I’ve missed it.

I want to create widget elements that have images in them. The images will originally be of variable sizes, but I want them to have a max-height equal to the height of the line that contains them. I tried several style values on both the image elements and their container, including:

  • height: 100%
  • max-height: 100%
  • line-height: inherit
  • messing with position values

None of these worked. I checked out http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height, and a couple other stackoverflow posts, but couldn’t get any of those solutions to work either.

The only thing that “worked” was setting the height explicitly with either pixels or rem or whatever, but I’d like the size to be relative to the line, not defined independently. Theoretically, I could have an update function that constantly resizes to make sure the widgets are the right height, but that would be pretty extreme.

Any ideas on how this can be done? Ideally with css?

2

Any ideas about where I can look for further resources?

3

Does anyone know for sure that it’s impossible to do this with just css? That would also be good to know.

4

You might get somewhere with display: inline-block; height: 100% on the container, and max-height: 100% on the images.