Есть ли способ через CSS установить высоту изображения на высоту строки?

У меня есть изображение, встроенное в текст. Это изображение 32x32. Я ищу, чтобы у него был автоматический размер до линии-высоты, в которой он находится, чтобы он соответствовал должным образом. Есть ли способ сделать это?

Я ищу, чтобы иметь возможность размещать изображение в любом месте с неизвестной высотой линии и иметь размер правильно.

Ответ 1

Используйте img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*

Смотрите Обновлено демо (Увеличьте или уменьшите размер шрифта, чтобы просмотреть результат.)

Ответ 2

Вы можете установить высоту на высоту строки, если вы явно установили оба параметра, например

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

Если вы не хотите устанавливать высоту линии, вам нужно будет угадать настройки браузера (которые обычно зависят от шрифта). Это может быть хорошим предположением:

img { height: 1.12em; }

Чтобы изображение правильно поместилось в текст, чтобы оно не увеличивало фактическую высоту строки, вам также нужно будет выровнять его по вертикали в нижней части строки, а не в исходную строку текста (что выше ):

img { vertical-align: bottom; }

Если вы хотите, чтобы изображение находилось на базовой линии (по умолчанию), вам нужно угадать расстояние между дном и базовой линией и соответственно уменьшить высоту изображения. В этом случае height: 1em, или, может быть, с небольшим меньшим значением, может быть хорошей догадкой.