html - CSS Parent Div 未调整响应图像的大小

Question

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

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

我创建了一个 fiddle 来展示这个问题。

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

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

干杯

Answer 1

去掉固定高度即可。无论如何，它将与图像相关。

你必须使图像和 ".bannercon" div 位置之间的 div 相对，因此它也具有图像的高度。

所以删除

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

并像这样改变 .bannercon css 规则

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

这是一个更新的 fiddle : https://jsfiddle.net/hhyswzw3/8/