Ajustar div que contiene imagen movida con "transform"

[kodaichi]

Hola a todos, estoy aprendiendo html5+css3 por mi cuenta y recientemente me he topado con un problema.

Tengo un div llamado "slide" que contiene una imagen con el ancho en 100%, esta imagen la he movido hacia arriba usando la propiedad "transform". El problema es que obviamente esta propiedad solo mueve el contenido y no ajusta el tamaño del contenedor, por lo que queda sobrando un espacio en blanco.

Mi pregunta es si hay alguna manera de hacer que la altura del contenedor se ajuste al contenido, de tal manera que, en este caso, permita al contenido restante de la web(la franja amarilla) subir junto con la imagen.

No puedo usar pixeles ni ems en "slide" porque necesito que el contenido web se ajuste cuando reduzca la ventana del navegador. Tampoco quiero modificar el html.

Me gustaría saber si existe una solución solo con css, pero si en definitiva no la hay, entonces me gustaría saber de que otra manera solucionar esto.

Este es mi código: https://jsfiddle.net/t4yoatgx/

Y aquí una imagen para que todo quede más claro: http://s183.photobucket.com/user/Tiefnuker/media/image_zpsrgkkpmuc.jpg.html

Desde ya les agradezco su ayuda, saludos.