HTML - li圖標不會調整縮放比例

Question

只是一個小問題。 我已經將list-style-image設置爲帶有我希望使用的圖像的url，它是一個32 * 32px png。

放大發行： 該列表變爲壓縮並移入相鄰的div。

縮小問題： 該列表變得間隔較大並且垂直向下延伸，直到列表結束。

我試圖通過將其填充和邊距設置爲0來固定其大小，以及將高度和寬度設置爲自動以及具體值，但無濟於事。

如果需要，我可以提供一個代碼片段，但在發佈時有一個簡單的修復方法時，我不會這樣做。

Answer 1

看看：https://jsfiddle.net/bernardbaker/pg3xu2ca/ 我已經用背景（精靈表）HTML列表元素。 您可以對單列精靈表執行同樣的操作。

li { 
    list-style: none; 
    position: relative; 
    padding-left: 20px; 
    height: 18px; 
    width: 12px; 
    background-image: url('https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg'); 
    background-size: 100px 100px; 
    background-position: 0px 0px; 
} 

它還解決了放大和縮小問題。