css - CSS を使用して画像を現在のテキストの高さにサイズ変更する

Question

コンテキスト: 方程式のインライン画像 (PNG ファイル) を Web ページにシームレスに挿入しようとしています。これはすでに行われていることは承知していますが、これを学習プロジェクトとして使用しています。したがって、数学を表示するライブラリには興味がありませんが、この質問に対する一般的な答えに興味があります。

cssスタイルを使用して、現在のテキストの高さの何パーセントかに一致するように、画像の高さを自然にスケーリングしたいと思います。私は Web デザインの初心者ですが、次のようなスタイルを含めることができるように思われます。

height: 80% * parent.text_height

これは純粋なCSSで可能ですか?

Answer 1

Emsは、親要素のテキストサイズに依存する相対的な測定単位です。1 emは、おおよそテキスト行間の距離です。したがって、次のことを試すことができます。

height: .8em;

ただし、インライン要素（単純な古いimgタグなど）は高さの指定を受け入れないことに注意してください。