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

Question

我正在组合一个HTML页面，以便在移动电话和PC/Mac上查看。在文本中，我有时会有内联图像：

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

我的字体大小是用em或百分比来设置的，以便在低分辨率和高分辨率手机上都可以阅读。问题是，在高分辨率手机上，我的按钮（通常为32像素高的图片）看起来太小了。

我该如何调整图片大小？最好只使用CSS，但JS也可以。

- Memes

---

如果你的段落只有一行，将其行高设置为32像素（以ems为单位），然后将图像宽度设置为自动，高度设置为100%。理论上，这应该可以随着字体大小的变化来缩放你的图像。 - ninty9notout

Answer 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;
}

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

如果你想让字体的大小变成原来的两倍，只需将图像的高度设置为2em。

- everydayghost

---

谢谢，这么简单我都怪自己还要问，我应该自己找出来的 :( - Memes

不客气！有时候ems很难理解，我很高兴能帮到你 :) - everydayghost

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;
}

- Thanos