根据字体大小调整图像大小

Question

我正在整理一个HTML页面,可以在手机和PC/Mac上查看.在文中,我有时会有内嵌图像:

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

我的字体大小为em或%,因此在低分辨率手机和高分辨率手机上都可以读取.问题是我的按钮(通常是32px高图像)在高分辨率手机上看起来很小.

如何调整图像大小？最好是纯CSS,但JS仍然可以.

Answer 1

如果在<p>标记中设置字体的大小,则应该只能使用height: 1em;on p img将图像的高度设置为字体的高度.

这是一个显示我的意思的jsfiddle:

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>

如果你希望它是字体大小的两倍,你只需将图像的高度设置为2em.