html - 画像が読み込まれていない場合でも、を強制的に幅に合わせる方法

Question

たくさんのimgを読み込んでいますが、読み込まれていない場合や、まだ読み込みが完了していない場合でも、ドキュメントのスペースを占有してほしいと思います。

幅と高さを（属性自体として、およびスタイル属性内の両方で）指定しようとしましたが、画像が読み込まれない場合に画像がスペースを占有しないのはイライラします。

確かに、画像の読み込みに失敗した場合でも、画像を特定のサイズに強制する方法が必要です。

ありがとう

score 14 · Accepted Answer

確かにあります：

<img src="path/to/image.png" height="50" width="20" />

また、style="/* css */"属性内で幅と高さを指定することが機能しなかった理由は、画像がデフォルトでインライン要素であるためです。画像がとdisplay: blockの値を受け入れるように指定した場合。widthheight

追加する場合、css / styleに：

display: inline-block;

動作するはずです。Firefoxが幅/高さの属性を尊重しない理由はわかりませんが、それでもです。要素はデフォルトでインラインであるため、定義されたIEでさえもdoctype尊重する必要があります。display: inline-blockimg

score 3 · Accepted Answer

簡単な答え：画像を<div>固定幅でラップします。

<div style="width: 400px;"><img src="404.png" /></div>

パディング、ボーダーなどをに設定0すると、divがそこにあることに気付くことはありません。

2 に答える 2