html - 容器高度不可缩放

Question

我在一个容器中有 2 张图片彼此重叠放置。 (它们彼此重叠以获得淡入淡出效果)

看起来像:

<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 是这样的:

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

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

Answer 1

默认情况下，“img”元素显示为内联元素。这将向图像添加行高并导致图像之间出现间距。如果您添加“显示: block ”，那应该可以解决问题，如果我理解正确的话；不幸的是我不能完全测试你的例子。另一种解决方案是将 font-size: 0 添加到父...

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