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

【问题标题】：Adjust image size based on the font size根据字体大小调整图像大小
【发布时间】：2013-08-28 10:47:51
【问题描述】：

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

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

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

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

【问题讨论】：

如果您的段落只有单行，请将其行高设置为 32px（以 em 为单位），然后将图像宽度设置为自动，高度设置为 100%。理论上，这应该会随着字体大小的变化而缩放图像。

【解决方案1】：

如果您在<p> 标签中设置字体大小，您应该能够在p img 上使用height: 1em; 将图像的高度设置为字体的高度。

这里有一个jsfiddle 来说明我的意思：

body {
  font-size: 62.5%;
  /*sets 1em to 10px for convenience*/
}

p {
  font-size: 3em;
}

p img {
  height: 1em;
  width: auto;
}

&lt;p&gt;Hello world! &lt;img src="http://images.wikia.com/dragonvale/images/e/e8/Space_invader.jpg"&gt;&lt;/p&gt;

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

【讨论】：

【解决方案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;
}

【讨论】：