Как заставить <img>занять ширину, даже если изображение не загружено

Question

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

Я попытался указать ширину ивысота (как сами атрибуты, так и внутри атрибута стиля), и это расстраивает, что изображения не будут занимать место, если они не загружаются.

Конечно, должен быть способфорсировать img к определенным размерам, ** даже если это изображение не загружается.

Спасибо

Answer 1

Конечно, есть:

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

Кроме того, причина, указывающая ширину и высоту в атрибуте style="/* css */", не работает, потому что изображения по умолчанию являются встроенными элементами.Если бы вы указали display: block, изображение приняло бы значения width и height.

Если вы добавите к css / style:

display: inline-block;

Это должно работать,Я не уверен , почему Firefox не учитывает атрибуты ширины / высоты, но все же.Даже IE с определенным doctype должен учитывать display: inline-block, поскольку элементы img по умолчанию являются встроенными.

Answer 2

Простой ответ: оберните изображение в <div> с фиксированной шириной.

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

Если вы установите отступы, границы и т. Д. На 0, вы не заметите, что divесть.