根据字体大小调整图像大小 [英] Adjust image size based on the font size
问题描述
我正在整理一个HTML页面,以便在手机和PC/Mac中都可以查看.在文字中,有时会有嵌入式图像:
I am putting together an HTML page to be viewed in both mobile phones and PC/Mac. In the text, I sometimes have inline images:
<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>
我的字体以em或%大小调整,因此在低分辨率电话和高分辨率电话上都可以读取.问题是我的按钮(通常为32像素高的图像)在高分辨率手机上显得太小了.
My fonts are sized in em or % so it is readable on both low res-phones and high-res phones. The issue is that my buttons (usually 32px high images) appear so tiny on high-res phones.
如何调整图像尺寸?最好是纯CSS,但JS还是可以的.
How do I adjust the image size? Preferably pure CSS, but JS is still OK.
推荐答案
如果在<p>
标签中设置字体大小,则应该只能在p img
上使用height: 1em;
设置图像的大小.字体的高度.
If you set the size of your font in the <p>
tag, you should just be able to use height: 1em;
on p img
to set the image's height to that of the font.
这是一个 jsfiddle 以显示我的意思:
Here's a jsfiddle to show what I mean:
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.
And if you want it to be double the size of the font, you'd just set the height of the image to 2em.
这篇关于根据字体大小调整图像大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!