我可以让css精灵匹配行高吗？

Question

我有一些图标我想与文本内联，但文本有几个不同的大小，并且我想要图标大小以匹配文本行高度。

目前，我正在使用CSS背景精灵的图标。我尝试了一些与transform: scale和其他一些与background-size shenanans，但它似乎并没有做正确的事情。

这是可行的，还是我需要将它分成小图像，然后可以设置为适当的height？

Answer 1

假设你正在使用CSS3，你知道你的文字的大小，和您的图片是方形的（如50像素X 50像素），那么你可以使用的background-size，CSS变量的组合，如果你愿意，甚至transform 。看看下面的小提琴，以及我在这里插入的代码（以防小提琴不起作用）。我使用的示例文本高度为14px，源图像为300x300px，使用变量缩小为14x14px。

https://jsfiddle.net/u82skrhe/5/

HTML

<div id='icon' class='one'></div> 
<p class='one'> 
    this is some of my text here 
</p> 

CSS

:root{ 
    --font-size-1: 14px; 
} 

p.one{ 
    font-size: var(--font-size-1); 
    margin-left: 20px; 
} 

#icon.one{ 
    width: var(--font-size-1); 
    height: var(--font-size-1); 
    background: url("http://placehold.it/300x300"); 
    background-size: 100% 100%; 
    float: left; 
}