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

Question

我正在整理一个 HTML 页面，以便在手机和 PC/Mac 中查看。在文本中，我有时会有内联图像：

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

我的字体大小以 em 或 % 为单位，因此在低分辨率手机和高分辨率手机上都可以阅读。问题是我的按钮（通常是 32 像素高的图像）在高分辨率手机上显得太小了。

如何调整图像大小？最好是纯CSS，不过JS还是可以的。

Answer 1

如果您在<p>标签中设置字体的大小，您应该能够使用height: 1em;onp 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。

Answer 2

您可以给所有图像一个类并应用以下 css 规则

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

.scale
{
    height: 1em; 
    width: 1em;
}