6

imgまだ読み込まれていないHTML の高さを事前に設定したい状況があります。その理由は、この高さは、画像が完全に読み込まれる前に実行される可能性があり、正確さを維持する必要がある計算で使用されるためです。私は次のことを試しました：

<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div>

cssをいくつか入れます

.testimage {
    height: 200px;
    width: 200px;
}
​

少なくとも Firefox 5 では、余分なスペースはレンダリングされません (奇妙なことに、壊れた画像も表示されず、空白だけです)。つまり、追加するまでですdisplay: inline-block。少なくとも一部の他のブラウザでは、デフォルトの表示でinline目的の結果が得られます。これは期待されていますか？もしそうなら、なぜですか？

ここにもjsFiddleがあります：http://jsfiddle.net/uYXD4/

4

3 に答える 3

3

ここでは、画像はインライン要素であると述べています - http://htmlhelp.com/reference/html40/special/img.html

一方、ここを見てください - Is <img> element block level or inline level?

<img>要素はインラインとブロックの両方のようなものです。それを定義する厳密な規則はないため、おそらくブラウザ ベンダーがデフォルトについて独自の決定を下します。したがって、あなたの最善の策は、彼らの仮定を次のようにリセットすることですdisplay: inline-block

于 2012-06-25T16:59:02.680 に答える
2

画像は置き換えられた要素です：

画像、埋め込みドキュメント、アプレットなど、コンテンツがCSSフォーマットモデルの範囲外にある要素。たとえば、HTML IMG要素のコンテンツは、多くの場合、その「src」属性が指定する画像に置き換えられます。

置き換えられた要素の場合、display: inline-blockは、デフォルトとまったく同じ効果を持つことになっていますdisplay: inline。

したがって、これは一部のブラウザでのその奇妙な動作の考えられる説明かもしれません*：

完全にロードされた画像のみを置換された要素として扱い、それ以外の場合は置換されていない要素として扱います。結局のところ、それは理にかなっており、標準では明示的にそれを禁止していません。結果として、3つの可能なシナリオがあります。

  1. 置き換えられた要素、インラインまたはインライン-ブロックは関係ありません、heightプロパティは機能します
  2. インラインの置換されていない要素、height属性は効果がありません
  3. インラインブロックの置換されていない要素、heightプロパティは機能します

ロードされた画像は常に1と見なされ、壊れた/ロードされた画像は1または2と見なされる場合があります（または、display：inline-blockを明示的に設定した場合は3.）

*それが実際にどのように機能するかはわかりませんが。

于 2012-06-25T20:04:37.860 に答える
0

次のようなものを使用しないのはなぜですか

<img src="..." width=400 height=200>

私はまったく同じことをしており、非常にうまく機能しています。別のオプションは...

$('.myimg').load( function() { /* ops */ } );

それがすべてのブラウザで画像をロードするのを待っているかどうかはわかりませんが

于 2012-06-25T17:04:07.443 に答える