27

I am putting together an HTML page to be viewed in 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 are sized in em or % so it is readable on both low res-phones and high-res phones. The issue is that my buttons (usually 32px high images) appear so tiny on high-res phones.

How do I adjust the image size? Preferably pure CSS, but JS is still OK.

approxiblue
  • 6,982
  • 16
  • 51
  • 59
Memes
  • 1,005
  • 2
  • 11
  • 20
  • If your paragraph is only going to be single line, set its line height to 32px (in ems), then set the images width to auto and height to 100%. This should, in theory, scale your images as the font size changes. – ninty9notout Aug 26 '13 at 02:35

2 Answers2

39

If you set the size of your font in the <p> tag, you should just be able to use height: 1em; on p img to set the image's height to that of the font.

Here's a 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 double the size of the font, you'd just set the height of the image to 2em.

approxiblue
  • 6,982
  • 16
  • 51
  • 59
everydayghost
  • 681
  • 1
  • 6
  • 12
4

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;
}
Thanos
  • 3,039
  • 2
  • 14
  • 28