hacer una imagen rota respeto dimensiones CSS

Question

estoy sujeción tamaños de imagen con CSS:

#somewhere img { 
    width: 160px; 
    height: 90px; 
} 

Cuando toda la carga imágenes correctamente, mi diseño de la página se ve bien. Por otro lado, si una imagen en particular no se carga, el diseño de mi página se estropea porque la imagen rota ocupará 0px por 0px. Los elementos alrededor de esa imagen rota se desplazarán hacia arriba. ¿Cómo puedo hacer que las imágenes rotas todavía respeten las dimensiones de CSS para que mi diseño no colapse?

Answer 1

Adición de display: block-img debe ser lo suficientemente bueno:

#somewhere img { 
    width: 160px; 
    height: 90px; 
    display: block; 
} 

---

Si de alguna manera esto no funciona, envuélvalo ping el img en otro elemento funcionará.

<span><img class="channelLogoImg" width="160" height="90" src="" /></span> 

#somewhere span, #somewhere img { 
    width: 160px; 
    height: 90px; 
    display: block; 
} 

me eligieron span porque esa es la opción habitual para las envolturas frívolas.

Answer 2

Sé que esto no es una solución CSS, pero yo siempre especificar la anchura y la altura de los atributos de la etiqueta de la imagen en lugar de en el CSS - esto va a resolver su problema arrugando para las imágenes que faltan.

Answer 3

Dependiendo de su diseño, tal vez se puede añadir una propiedad CSS

display: [block/inline-block] 

a la etiqueta "img".

O puede presentar div/span envoltura alrededor de las imágenes y darles altura fija y ancho como:

<div style="height:90px; width:160px"> 
    <img src="foo.jpg" /> 
</div> 

Esperanza esto ayuda