我可以讓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; 
}