HTML Forzar img dimensiones requiere bloque?

Question

Tengo una situación en la que me gustaría un HTML img que aún no se ha cargado para tener una altura preestablecida. La razón es que esta altura se usará en un cálculo que se puede disparar antes de que la imagen se cargue por completo y debe permanecer precisa. He intentado lo siguiente:

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

y poner en un cierto css

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

y al menos en Firefox 5, el espacio extra no se representa (y curiosamente, la imagen rota no muestra tampoco, solo un espacio en blanco). Es decir, hasta que agregue display: inline-block. En al menos algunos otros navegadores, la pantalla predeterminada de inline produce el resultado deseado. Es esto esperado? Si es así, ¿por qué?

Aquí hay una jsFiddle así: http://jsfiddle.net/uYXD4/

Answer 1

Las imágenes son replaced elements:

Un elemento cuyo contenido es fuera del alcance del modelo de formato CSS, como una imagen, documento incrustado o applet. Por ejemplo, el contenido del elemento HTML IMG a menudo se reemplaza por la imagen que designa su atributo "src".

Para elementos reemplazados, display: inline-block es supposed to have the same exact same efffect como display: inline, que es el valor predeterminado.

lo que esta puede ser una posible explicación para ese comportamiento extraño en algunos navegadores *:

Tratan sólo completamente cargados imágenes como elementos sustituido, y por lo demás los tratan como elementos no reemplazados. Eso tiene sentido después de todo, y el estándar no lo permite explícitamente.Como consecuencia, hay 3 escenarios posibles:

1. reemplazados elemento, en línea o en línea-bloque no importa, height propiedad funciona
2. línea no reemplazados elemento, height atributo has no effect
3. inline-block no elemento -replaced, height propiedad funciona

imágenes cargadas siempre califican como 1., y las imágenes/carga rotos pueden calificar como puntos 1 o 2 (o 3 si se establece display: inline-block de forma explícita)

* No estoy seguro si así es como funcionan las cosas.

Answer 2

aquí dice que las imágenes son línea elementos - http://htmlhelp.com/reference/html40/special/img.html

Por otro lado echar un vistazo aquí - Is <img> element block level or inline level?

Parece que la <img> elemento es tipo de en línea y bloque. No hay reglas estrictas que lo definan, por lo que probablemente los proveedores de los navegadores tomen sus propias decisiones sobre los valores predeterminados. Así que lo mejor es reiniciar sus supuestos para display: inline-block

Answer 3

Por qué no usar algo como

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

estoy haciendo exactamente lo mismo y funciona bastante bien. Otra opción es ...

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

aunque no sé si es que espera para cargar la imagen en todos los navegadores o no