CODEWITHSUNDEEP
htmlcssimage
Hexana
Hexana

Reputation: 1135

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

Upvotes: 0

Views: 1075

Answers (2)

zippo
zippo

Reputation: 3

Your div size can't be auto resized if you define height to 300px,try to change div´s CSS to 

div {
    min-height: 300px;
}

Upvotes: 0

Aytee
Aytee

Reputation: 567

Just remove the fixed height. It will be relative to the image anyway.

Than you have to make the div between the image und ".bannercon" div position relative so it also has the height of the image.

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/

Upvotes: 1

Related Questions