Cómo forzar un <img> para aumentar el ancho, incluso si la imagen no está cargada

Question

Estoy cargando un montón de img, y me gustaría que ocupen espacio en el documento, incluso si no están cargados, o aún no se completó la carga.

He intentado especificar el ancho y el alto (tanto como atributos propios, como dentro de un atributo de estilo), y encuentro frustrante que las imágenes no ocupen espacio si no se cargan.

Sin duda, debe haber una forma de forzar una img a dimensiones específicas, ** incluso si la imagen no se carga.

Gracias

Answer 1

Ciertamente es:

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

Además, la razón que especifica la anchura y la altura dentro del atributo style="/* css */" no funcionó es porque las imágenes son, por defecto, los elementos en línea . Si hubiera especificado display: block, la imagen habría aceptado los valores width y height.

Si se agrega, a la css/estilo:

display: inline-block; 

Se debe trabajar. No estoy seguro por qué Firefox no respeta los atributos de ancho/alto, pero aún así. Incluso IE, con un doctype definido debe respetar display: inline-block, ya que los elementos img son, de forma predeterminada, en línea de todos modos.

Answer 2

La respuesta simple: ajuste la imagen en un <div> con un ancho fijo.

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

Si establece el relleno, etc frontera para 0, no se dará cuenta de que el div está allí.