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).

我已经在一个非常有趣的项目中工作了几个月,其中有一个完整的互动电影类型场景,有大量的css3动画。然后,用户(12岁左右的孩子)将遵循网络管理员创建的与许多元素交互的历史记录(上传他们的作品,回答问题等)。

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).

在这个FIDDLE中,你可以看到我正在谈论的一个例子(有一些项目的真实图像和基本布局)。

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.

正如您所看到的,场景是响应的,如果您更改窗口的宽度,一切正常,交互式元素与背景一起响应但是如果背景图像高于窗口,则绝对定位元素在y轴上移动搞乱整件事。

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.

相信我,我一直在努力。基本上在这个失败的FIDDLE中你可以看到我想在后台运行的行为,但是然后在不改变所有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.

如果有人能帮助我,我会感到沮丧。完美的解决方案是CSS,但任何jquery都非常受欢迎。最糟糕的情况是改变html,因为我们已经制作了数十页并正在工作。

Edited: Html code:

编辑:Html代码:

<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>

2 个解决方案

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>