Question

Context: I am trying to insert inline images of equations (PNG files) seamlessly into a webpage. I am aware that this has already been done before, but I’m using this as a learning project. Thus I am not interested in libraries that display math, but rather the general answer to this question.

I’d like the images to naturally scale their height to match to some percentage of the current text height with a css style. I’m a neophyte at web design, but it seems like I should be able to include a style that looks something like:

height: 80% * parent.text_height

Is this possible with pure CSS?

Answer 1

Ems are a relative units of measurement which is dependent on the text size of the parent element. One em is approximately the distance between lines of text. Therefore, you could try:

height: .8em;

But be aware that inline elements (like a plain old img tag) don’t accept height specifications.