Resize image to current text height using CSS

Question

Context . I am trying to embed inline equations (PNG files) in a web page. I know that this has already been done before, but I use it as a training project. So I'm not interested in math libraries, but rather a general answer to this question.

I would like the images to naturally increase their height to match some percentage of the current text height using the css style. I'm a neophyte in web design, but it looks like I should consider a style that looks something like this:

height: 80% * parent.text_height 

Is this possible with pure CSS?

Answer 1

Ems - relative units of measurement, which depend on the size of the text of the parent element. One em is the distance between lines of text. So you can try:

 height: .8em; 

But keep in mind that inline elements (like the plain old img tag, for example) do not support height specifications.