Prevent absolute positioned container with image inside overflow window height

Question

Let me start from the beggining.

I have been working a few months in a very insteresting project where there is a full interacting movie type scenario with plenty of css3 animations. Then the users (kids around 12 years old) will follow the history the web administrators will create interacting with many elements (uploading their works, answering questions and so on).

In these scenarios there are plenty of absolute positioned elements that may stay static or may move depending of the scenario phase the users are in that moment.

In this FIDDLE you can see an example of what I'm talking about (with some of the real images of the projects and the basic layout).

The (big) problem I have is that we notice late (so late) a mistake I have made and I have no clue how to fix it.

As you can see the scenarios are responsive and if you change the width of the window everything works fine and the interactive elements goes responsive along with the background BUT if the background image is higher than the window the absolute positioned elements move on the y-axis and mess the whole thing.

What I would love is to tell the background image (that adjust to the width of the window) to NOT overflow the window height (then insteed of black borders up and down I may get black borders right and left). but if this were not possible I wouldn't mind the scenario overflowing but keeping the absoluted positioned elements in the right place.

Trust me I have been trying. Basically in this failed FIDDLE you can see the behaviour I would like in the background but then It's imposible to set the absolute elements where I want in a responsive way without changing all the html.

I would apreciate if anyone could help me. Perfect solution would be with CSS, but any jquery is very welcome. The worst scenario would be to change the html as we already have dozens of pages made and working.

Edited: Html code:

<div class="fondo">
    <div class="contenedor-imagen">
        <div class="fondo-edificio">
            <img id="Fondo" src="http://play.crmzima.es/Images/Play/Edificio-fondo.png" alt="edificio fondo" />        
        </div> 
        <div class="objetos-delante-edificio">
            <img src="http://play.crmzima.es/Images/Play/Edificio-objetos-delante-coches.png" alt="edificio objetos front" />
        </div>  
        <div class="top-edificio">
            <img src="http://play.crmzima.es/Images/Play/Edificio-top.png" alt="edificio top" />
        </div> 

        <img class="fondo-img" src="http://play.crmzima.es/Images/Play/Edificio.png"/>
    </div>
</div>

Answer 1

Instead of using %'s for your max-heights, try using vh (view height) and vw (view width) units instead.

These are proportional to the screen's height and screens with respectively.

Here's a quick demo

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  height: 100%;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.fondo {
  height: 100%;
  width: 100vw;
  max-height: 100vh;
  position: relative;
}
.contenedor-imagen {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  max-height: 100vh;
  overflow: hidden;
}
.contenedor-imagen img {
  width: 100%;
  max-height: 100vh;
}
.fondo-edificio {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 100%;
  top: 0;
  left: 0;
}
.top-edificio {
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 100%;
}
.objetos-delante-edificio {
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 47.5%;
  bottom: 1%;
  left: 27%;
  -webkit-animation: coches 8s linear infinite;
  -moz-animation: coches 8s linear infinite;
  -o-animation: coches 8s linear infinite;
}
@-webkit-keyframes coches {
  0% {
    margin-left: 500px;
  }
  100% {
    margin-left: -500px;
  }
}

<div class="fondo">
  <div class="contenedor-imagen">
    <div class="fondo-edificio">
      <img id="Fondo" src="http://play.crmzima.es/Images/Play/Edificio-fondo.png" alt="edificio fondo" />
    </div>
    <div class="objetos-delante-edificio">
      <img src="http://play.crmzima.es/Images/Play/Edificio-objetos-delante-coches.png" alt="edificio objetos front" />
    </div>
    <div class="top-edificio">
      <img src="http://play.crmzima.es/Images/Play/Edificio-top.png" alt="edificio top" />
    </div>

    <img class="fondo-img" src="http://play.crmzima.es/Images/Play/Edificio.png" />
  </div>
</div>

Answer 2

Removing max-height:100%; to both .contenedor-imagen and .contenedor-imagen img, seems to solve the y-axis unwanted translation

Live demo