Question

我有两张照片放在一个容器内。（它们相互对立以防褪色效果）

所以看起来像：

<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

默认情况下，＆＃34; img＆＃34;元素显示为内联元素。这将为图像添加行高，并将导致图像之间的间距。如果您添加＆＃34; display：block＆＃34;，那么应解决问题，如果我正确理解它;不幸的是，我无法测试你的榜样。另一个解决方案是将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;
    }

Answer 2

您正试图让页面响应。您应该为您的内容提供min-width和max-width以及反之高度。或者，如果我能看到实际的内容，或者你可以给jsfiddle示例，这将很好地解决这个问题。：）

容器高度不可扩展

2 个答案: