テキストとインラインの画像があります。その画像は 32x32 です。適切に収まるように、それが含まれている場所の行の高さに自動サイズ設定することを検討しています。それを行う方法はありますか?
行の高さが不明な場所に画像を配置して、適切にサイズ変更できるようにしたいと考えています。
テキストとインラインの画像があります。その画像は 32x32 です。適切に収まるように、それが含まれている場所の行の高さに自動サイズ設定することを検討しています。それを行う方法はありますか?
行の高さが不明な場所に画像を配置して、適切にサイズ変更できるようにしたいと考えています。
使用するimg{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
この更新されたデモを参照してください(結果を表示するには、フォント サイズを増減します)。
たとえば、両方を明示的に設定する場合、高さを行の高さに設定できます。
* { line-height: 1.3; }
img { height: 1.3em; }
行の高さを設定したくない場合は、ブラウザのデフォルトを推測する必要があります (通常はフォントによって異なります)。これは良い推測かもしれません:
img { height: 1.12em; }
画像をテキストに適切に合わせて、実際の行の高さが増加しないようにするには、テキストのベースラインではなく、行ボックスの下部に垂直に揃える必要があります (これはより高いです)。
img { vertical-align: bottom; }
画像をベースライン (デフォルト) に合わせる必要がある場合は、底部とベースラインの間の距離を推測し、それに応じて画像の高さを小さく設定する必要があります。この場合、height: 1em
、または少し小さい値が適切な推測になる可能性があります。