Este grupo de trabajo ha estado por horas buscando para darle resolución a tus interrogantes, te dejamos la soluciones por esto esperamos serte de mucha apoyo.
Solución:
Bueno, ¿la razón por la que esto es?
En su ejemplo de trabajo, usa contenido. Un contenido tiene su propia altura y ocupa espacio, que los demás elementos de la página deben respetar.
Con el background-image solución, usa un fondo, que no usa espacio. los .imageContainer2 El elemento no puede conocer la altura de la imagen de fondo Y adaptarse a ella.
Este mismo problema se abordó aquí: ¿Cómo hacer que la altura de div se ajuste automáticamente al tamaño de fondo?
Simplemente verifique si la solución alternativa es adecuada para usted
Si las imágenes que desea mostrar en la propiedad de fondo siempre tienen la misma relación de aspecto, puede usar una de las técnicas que se explican aquí para hacer que el div mantenga la misma relación de aspecto que la imagen según el ancho.
Con tu ejemplo quedaría así:
body, html
height: 100%;
margin: 0px;
.imageContainer2
background-image: url("http://i.imgur.com/AWi7r5m.jpg");
background-position: center top;
background-size: auto 100%;
padding-bottom:178%;
background-repeat:no-repeat;
Tenga en cuenta que no sé qué está tratando de lograr exactamente. Usar este método para mostrar una imagen probablemente no sea semánticamente correcto según el contexto.