CSS Parent Div没有调整响应图像的大小

Question

我有一个父div不会相应调整大小，响应图像宽度设置为100％。父div的高度设置为300px，但是当图像调整大小时，div保持在300px并在图像和容器内容之间留下很大的空间。我试过了：

.bannercon {
  /*height: 300px;*/
    padding: 1em 0;
    overflow: hidden;
}

我创造了一个小提示来表明问题。

https://jsfiddle.net/volterony/hhyswzw3/

问题是如何让图像的容器div也相应地调整大小，以便在图像和文本之间不会出现间隙？

干杯

Answer 1

只需移除固定高度即可。无论如何它都与图像有关。

比你必须在图像和".bannercon" div位置相对之间做div，所以它也有图像的高度。

删除

#header-fade-0 {
  position: absolute;
}

并改变.bannercon css这样的规则

.bannercon {
  padding:1em 0;
  overflow: hidden;
}

这是一个更新的小提琴： https://jsfiddle.net/hhyswzw3/8/

Answer 2

如果您将高度定义为300px，则无法自动调整div大小，请尝试将div´s CSS更改为

div {
    min-height: 300px;
}