aタグやspanタグの背景画像の大きさの設定。

Question

前提・実現したいこと

CSSの背景画像設定を利用して、文字の左側にアイコンのように画像ファイルを表示させたいです。
このとき、元の画像ファイルの表示サイズがテキストよりも大きいのですが、
aタグやspanタグでは、どのように設定すれば、画像サイズの大きさを小さく設定することができますか？

divタグのときは、line-heightが効くみたいなので、line-heightの設定により、
下記のコードで意図したように背景画像のサイズを小さく表示させることができました。

ただし、下記のコードでaタグやspanタグの背景画像は小さく表示されませんでした。
下記のコードにおいて、aタグやspanタグでも背景画像を小さく表示させる方法を知りたいです。
なお、画像サイズはピクセル指定でなく、emのような文字ベースの単位で指定したいです。

ご教示お願い致します。

該当のソースコード

	<div>
		<div class="icon download">テスト</div>
		<a class="icon download">テスト</a>
	</div>

.icon {
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 1.5em;
}

.download {
    background-image: url(./imgs/files.png);
    font-size: 0.93em;
    line-height: 1.25em;
}

※files.pngは、32×32ピクセルの大きさ。

追記

1つの妥協案としては、aタグやspanタグを
display: block;
にしてしまえば、やはり画像が小さく表示されるのですが、これ以外の方法で知りたいです。
ご教示お願い致します。

Answer 1

まさかのフォントファミリーの設定で画像サイズが変わりました。

html {
font-family: arial, sans-serif;
}

ただし、line-height: 1.25em;をコメントアウトすると、
divタグの方は画像が大きいままです。
font-familyの影響により、spanとdivで画像サイズにより差異が出る不思議な現象、難問かと思いますが、ご理解されている方いましたら、ご教示いただきたいです。
宜しくお願い致します。

Answer 2

bacground-sizeで数値も指定できますが...
ちなみに値は横,縦の順です。

...
background-size:100% auto;
...

Comments

[tkshp]

ご回答ありがとうございます。
32×32ピクセルの画像では、小さくなりませんでした。

[退会済みユーザー]

えっと100%のところは変えてください

[tkshp]

ご回答ありがとうございます。
background-size:25% auto;
でちょうどよいサイズで表示されました。
失礼しました。