我正在组合一个HTML页面,以便在移动电话和PC/Mac上查看。在文本中,我有时会有内联图像:
<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>
我的字体大小是用em或百分比来设置的,以便在低分辨率和高分辨率手机上都可以阅读。问题是,在高分辨率手机上,我的按钮(通常为32像素高的图片)看起来太小了。
我该如何调整图片大小?最好只使用CSS,但JS也可以。
我正在组合一个HTML页面,以便在移动电话和PC/Mac上查看。在文本中,我有时会有内联图像:
<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>
我的字体大小是用em或百分比来设置的,以便在低分辨率和高分辨率手机上都可以阅读。问题是,在高分辨率手机上,我的按钮(通常为32像素高的图片)看起来太小了。
我该如何调整图片大小?最好只使用CSS,但JS也可以。
如果您在<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。
<p>to do that, then press on button <img class="scale" src="button.png" /> for 2 seconds</p>
.scale
{
height: 1em;
width: 1em;
}