4

編集：私は何のために固定サイズに依存したくないことを強調します。

テキストとインラインで表示したい画像があります。画像を

a）正方形であり、

b）テキストと同じ高さである。

「H」と呼ばれるCSSユニットが存在するとします。これは、「ex」が「x」の高さに等しいのとほぼ同じように、線の高さに等しくなります。次のようなコードを記述できるようにしたいと思います。

img.myclass {
    width: 1H;
    height: 1H;
}

そのようなユニットは実際には存在しないようです。私は正しいですか？

そのような単位がない場合（正確に言うと、ある行のベースラインから次の行のベースラインまでの距離が必要です）、Javascriptを使用せずに正方形の画像を線で塗りつぶすという目標を達成するにはどうすればよいですか？

4

6 に答える 6

0

私はおそらくこの権利を見ていません...しかし、あなたはただ線に特定の高さを与えて、それからそれに合うように画像を設定することができませんでしたか？

<span style="display:inline-block;height:20px;">

Hello <img src="testtext.png" style="max-height:100%;" />

</span>
于 2012-10-30T18:22:09.243 に答える
0

emsまたはexsでテキストのフォントサイズおよび/または行の高さを設定でき、画像の高さ/幅に同じ測定値を使用できます。ただし、変数を使用してそれらを設定したい場合は、LESSCSSをお勧めします

于 2012-10-30T18:24:20.377 に答える
0

を特定の値に設定し、line-heightを特定の値に設定xすると、行の高さが次のようになることがわかります。次に、任意の量のテキストの高さを取得します。font-sizeyx * y

例:font-size: 10px; line-height: 120%;行の高さは120% * 10pxまたはになります12px。テキストのブロックが 10 行の場合、高さが 120px であることがわかります。詳細については、 W3 line-heightおよびW3 font-sizeを参照してください。

注:これは非常に不正確な方法です。画面サイズからエンド ユーザー ブラウザのカスタム フォント サイズまで、これは無視されます。@Irongaze.comが言ったように、新しいCSS設定を設定するときに他のCSS設定を参照することはできません。これは JavaScript で行うのが最適です。

于 2012-10-30T18:27:29.490 に答える
0

CSS にはline-heightプロパティがあるので、それを1.2や などの特定の値に設定すると120%、em と行の高さの比率がわかり、それを画像の単位として使用できます。

img.myclass {width:1.2em; height:1.2em}

ただし、デフォルトでは、イメージはラインの下部ではなくベースラインに垂直に配置されることに注意してください。この回答の私の図も参照してください。

于 2012-10-30T18:29:02.177 に答える
0

固定の幅/高さを選択して、line-height と img の幅/高さをその一定のサイズに設定するか、javascript を使用できます。新しい CSS プロパティを設定するときに、別の CSS プロパティを参照する方法はありません。これは、あなたが望んでいるようです。

于 2012-10-30T18:14:03.820 に答える