Bildgröße ändern auf aktuelle Texthöhe mit CSS

Question

Kontext: Ich versuche, Inline-Bilder von Gleichungen (PNG-Dateien) nahtlos in eine Webseite einzufügen. Mir ist bewusst, dass dies bereits früher gemacht wurde, aber ich nutze dies als Lernprojekt. Ich bin also nicht an mathematischen Bibliotheken interessiert, sondern an der allgemeinen Antwort auf diese Frage.

Ich möchte, dass die Bilder natürlich ihre Höhe zu einem bestimmten Prozentsatz der aktuellen Texthöhe mit einem CSS-Stil skalieren. Ich bin ein Neuling in Web-Design, aber es scheint, wie ich einen Stil gehört der Lage sein sollte, die wie etwas aussieht:

height: 80% * parent.text_height 

Ist dies möglich mit reinem CSS?

Answer 1

Ems sind relativ Maßeinheiten, die von der Textgröße des Elternelements abhängig ist. Ein em ist ungefähr der Abstand zwischen Textzeilen. Daher könnten Sie versuchen:

height: .8em; 

aber bewusst sein, dass Inline-Elemente (wie ein plain old img-Tag) nicht Höhenangaben akzeptieren.