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

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.