テクニカルドキュメントを書く。場合によっては、指示にGUIアイコンのインラインイメージを含める必要があります。インラインイメージはしばしばアイコンのスクリーンショットです。場合によっては、スクリーンショットが周囲のテキストよりもはるかに大きくなります（下の画像のように）。それは悪く見え、それは私を悲しくする。CSSを使用してインラインイメージのサイズを変更する
インライン画像は、周囲のテキストと同じサイズであることを保証するCSSルールのコンボはありますか？
あなたが探しているのは、CSS単位 "em"です。ここで1emは現在のフォントサイズの1倍を表します。 img-Tagのmax-width/max-heightを1emに設定することができます。 vertical-align: middleを使用して画像を水平方向に中央に配置します。
h1 img,
h3 img {
max-width: 1em;
max-height: 1em;
vertical-align: middle;
}<h1>
Big header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)
</h1>
<h3>
Small header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)
</h3>ここでは、と周り混乱することができJSFiddleです：https://jsfiddle.net/qvd56t62/6
ビンゴ。しかし、私は 'max-width'を' 1em'に制限することは意味がないと思います。私はときどき長いものよりも広いアイコンで作業することがあります。そのような場合、アイコンの高さは周囲のテキストよりも小さくなります。 –
なぜ素晴らしいフォントを使用していませんか？ –
@TonyHensler FontAwesomeにはKayceが技術文書を書いているアプリケーションと同じアイコンがあると思いますか？技術文書では、画像を実際のインタフェースに可能な限り近づけたいと考えています。 –
これは悪く見えるかもしれませんが、ユーザーは見た目だけでなく、探しているアイコンのサイズも知っています。 –