Html 容器高度不可缩放

我有两张图片放在一个容器中，相互上方。它们被放置在彼此上方，以产生淡入淡出的效果

所以它看起来像：

<div id="container">
  <img id="mainpictop" on-load="{{fade}}" src="{{pic1source}}" style="opacity:{{pic1opacity}}">
  <img id="mainpicbottom" on-load="{{fade}}" src="{{pic2source}}" style="opacity:{{pic2opacity}}">
</div>

---

图像可以适当缩放，但当我在图片下放置一个元素并调整页面大小时，会出现一个间隙，因为容器的高度保持不变。如何调整容器的大小？有没有办法只使用css和html？

默认情况下，img元素显示为内联元素。这将增加图像的线条高度，并导致图像之间的间距。如果您添加display:block，如果我正确理解的话，应该可以解决这个问题；不幸的是，我不能完全测试你的例子。另一个解决方案是将字体大小：0添加到父级

#container{
      display: block;
      position: relative;
      overflow: hidden;
      height: 24em;
    }
img {
      position: absolute;
      display: block;
      width: 100%;
      transition: opacity 1s;
      -webkit-transition: opacity 1s;
    }

---

您正在尝试使页面响应。您应该为内容指定最小宽度、最大宽度和高度，反之亦然。或者如果我能看到实际的内容，或者你能给出一个JSFIDLE示例来解决这个问题

实现这一目标的唯一途径是去除位置：绝对；从图像改为使用显示：块；或显示：内联块；但是当我移除绝对位置时，我不能让图像彼此重叠，对吗？你可以在2.img上使用“transform3d”翻译，或者使用div.clearfix或Flexbox。对不起，我真的不明白。。。当我移除位置时：绝对；并使图像显示：块；图像将显示在彼此下方而不是上方。。。我的动画只是将两幅图像中的一幅的不透明度设置为0或1，以循环通过它们。这并不能解决问题，我仍然需要给容器一个高度，当我调整页面大小时，img会变小，但容器高度不会变小，这会在页面上的图片和容器后的下一个元素之间创建一个间隙HI，我会制作一个JSFIDLE，但我正在使用谷歌聚合物作为元素：/当我设置最小高度时，图片无法再正确缩放

#container{
      display: block;
      position: relative;
      overflow: hidden;
      height: 24em;
    }
img {
      position: absolute;
      display: block;
      width: 100%;
      transition: opacity 1s;
      -webkit-transition: opacity 1s;
    }