Adjust image size based on font size

Question

I am compiling an HTML page for viewing on both mobile phones and PC / Mac. In the text, I sometimes have inline images:

<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p> 

My fonts have a size in em or%, so it reads on both low-resolution phones and high-resolution phones. The problem is that my buttons (typically 32x images) seem so tiny on high-resolution phones.

How to adjust image size? Preferably pure CSS, but JS is still fine.

Answer 1

If you set the font size in the <p> , you should just use height: 1em; on p img to set the height of the image compared to the font.

Here's jsfiddle to show what I mean:

 body { font-size: 62.5%; /*sets 1em to 10px for convenience*/ } p { font-size: 3em; } p img { height: 1em; width: auto; } 

 <p>Hello world! <img src="http://images.wikia.com/dragonvale/images/e/e8/Space_invader.jpg"></p> 

And if you want it to be twice the font size, you would set the image height to 2em.

Answer 2

You can give all your images a class and apply the following css rule

 <p>to do that, then press on button <img class="scale" src="button.png" /> for 2 seconds</p> .scale { height: 1em; width: 1em; }