Is there a way via CSS to set the image height to the line-height?

Question

I have an image that\'s inline with text. That image is 32x32. I\'m looking to have it auto size to the line height of where it\'s contained so it fits properly. Is

Answer 1

Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*

See this Updated Demo (Increase or decrease the font size to view the result.)

Answer 2

You can set the height to the line height if you explicitly set both, e.g.

* { line-height: 1.3; }
img { height: 1.3em; }

If you don’t want to set the line height, you would need to make a guess on browser defaults (which usually depend on font). This might be a good guess:

img { height: 1.12em; }

To make an image fit properly into text, so that it does not cause the actual line height to be increased, you would also need to align it vertically to the bottom of the line box, no to text baseline (which is higher):

img { vertical-align: bottom; }

If you need to let the image sit on the baseline (the default), you need to make a guess on the distance between the bottom and the baseline and set the image height accordingly smaller. In this case, height: 1em, or maybe with a little smaller value, might be a good guess.