css - 图像叠加和响应式设计

Question

我必须叠加两个图像才能在页面滚动上获得淡入淡出效果，这不是问题，效果很好。问题是，如果我没有为 .square-banner 类设置高度，则横幅会与以下横幅重叠(第二张图片)。因为该网站是响应式的，所以我需要消除 .square-banner 类的高度，但我还没有找到解决方案。

<div id="banner-1-1" class="square-banner">
    <img class="img-bottom" id="img-bottom-1" src="images/prodigio-wording.jpg">
    <img class="img-top" id="img-top-1" src="images/prodigio.jpg">
</div>

.square-banner {
  position:relative;
  float:left;
  width:100%;
  height: 430px;
  cursor: pointer;
}

.img-bottom, .img-top {
width: 100%;
height: auto;
display:block;
float:left; 
}

.square-banner img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

由于图像 position:absolute(让它们重叠)，.square-banner 不占用高度空间。这是我必须解决的真正问题。

Answer 1

以下代码片段显示了如何通过简单地使一个 绝对化来叠加两个相同大小的图像。另一个将允许您的框自动具有高度，不需要 float 。现在您可以在 #container 周围移动并以任何您想要的方式重新塑造它。

var container = document.getElementById('container');
container.addEventListener('click', function(e){
  container.className = container.className === 'other' ? '' : 'other';
});

#container {
  position: relative;
}
#container img {
  opacity: 1;
  -webkit-transition: opacity 500ms;
  transition: opacity 500ms;
}
#container img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
}
#container.other img {
  opacity: 0;
}
#container.other img:first-child {
  opacity: 1;
}

<div id="container">
  <img src="http://placehold.it/350x250" />
  <img src="http://placehold.it/350x250/dd0300" />
</div>

单击代码段可将可视层从红色切换为灰色。