Question

让我从开始做起。

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

在这些场景中，有很多绝对定位元素可能会保持静态，或者可能会根据用户在该时刻的场景阶段而移动。

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

我遇到的（大）问题是我们发现了一个错误（这么晚），我不知道如何修复它。

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

我喜欢的是告诉背景图像（调整到窗口的宽度）以不溢出窗口高度（然后上下黑色边框的输入我可能会左右边缘出现黑色边框）。但如果这是不可能的，我不介意情景溢出，但将绝对定位的元素保持在正确的位置。

相信我，我一直在努力。基本上在这个失败的 FIDDLE 中你可以看到我想要在后台运行的行为但是然后在不改变所有html的情况下以响应的方式设置我想要的绝对元素是不可能的。 / p>

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

编辑：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>

Answer 1

将max-height:100%;移至.contenedor-imagen和.contenedor-imagen img，似乎解决了y轴不需要的翻译

Live demo

Answer 2

请尝试使用% （查看身高）和max-height <而不是vh用于vw。 em>（查看宽度）单位。

它们分别与屏幕的高度和屏幕成比例。

Here's a quick demo

＆＃13;

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

＆＃13;

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

＆＃13;

防止绝对定位的容器，图像在溢出窗口高度内

2 个答案: