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

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;上的p img将图像的高度设置为字体的高度。< / p>

这是一个显示我的意思的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;
}