Hexana Hexana - 24 days ago 9
CSS Question

CSS Parent Div Not Resizing to Responsive Image

I have a parent div that does not resize accordingly with a responsive image width is set to 100%. The height of the parent div is set to 300px but when the image resizes, the div stays at 300px and leaves a big space between the image and the container content. I have tried:

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


I have created a fiddle to show the problem.

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

The question is how can I get the image's container div to also resize accordingly so no gap appears between the image and the text?

Cheers

Answer

Just remove the fixed height.

Than you have to make the div between the image und ".bannercon" div position relative and it works fine.

so remove

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

and alter .bannercon css rule like this

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

Here's an updated fiddle: https://jsfiddle.net/hhyswzw3/8/