Gibt es eine Möglichkeit über CSS, die Bildhöhe auf die Zeilenhöhe zu setzen?

Question

Ich habe ein Bild, das inline mit Text ist. Das Bild ist 32x32. Ich freue mich darauf, es Auto-Größe auf die Linie-Höhe von was ist in, damit es richtig passt. Gibt es eine Möglichkeit, das zu tun?

Ich bin in der Lage, das Bild überall mit einer unbekannten Zeilenhöhe und Größe richtig zu platzieren.

Answer 1

Verwenden img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*

Sehen Sie diese Updated Demo (Zunahme oder die Schriftgröße verringern das Ergebnis zu sehen.)

Answer 2

Sie können die Höhe auf die Zeilenhöhe festlegen, wenn Sie beide explizit festlegen, z.

* { line-height: 1.3; } 
img { height: 1.3em; } 

Wenn Sie nicht die Zeilenhöhe festlegen möchten, würden Sie eine Vermutung auf Browser-Voreinstellungen vornehmen müssen (die in der Regel auf Schriftart abhängen). Dies könnte eine gute Vermutung:

img { height: 1.12em; } 

Um ein Bild richtig in Text fit zu machen, so dass es nicht die tatsächliche Zeilenhöhe erhöht werden verursacht, würden Sie es auch ausrichten müssen senkrecht zum Boden der Zeilenbox, keine Grundlinie in Text (die höher ist):

img { vertical-align: bottom; } 

Wenn Sie das Bild auf der Basislinie (Standard) sitzen lassen müssen, müssen Sie auf den Abstand zwischen dem Boden eine Vermutung machen und die Grundlinie und stellen Sie die Bildhöhe entsprechend kleiner ein. In diesem Fall könnte height: 1em, oder vielleicht mit einem etwas kleineren Wert, eine gute Schätzung sein.