DIV and image inside should take up only available height

Hi guys,

It would probably be the easiest if you looked at the demo first : http://zerobrainwash.com/sandbox/responsiveImage/ .
I have been playing with this the whole day. The banner is fixed and the bottom part with image is responsive. I got in working on Chrome so that the main image takes up only available height and then width is chosen automatically.
However, on Firefox and Internet Explorer the image expands to its full height rather than fit into available space. I can’t figure out what is the problem. Maybe you are more clever than me and have an idea of what could be the problem? :slight_smile:

Try adding this:


.landscapeOverviewHelper{display:table}

IE8+ only

Or try:


.landscapeOverviewHelper{float:left}

BTW that image file size is about ten times too big. I would be looking at 150k maximum not 1500k!

Appreciate your help Paul!! I tried out both options, not working. Also, on Chrome { display: table } caused the image to disappear completely while on other browsers it had no effect. I have reduced image size, cheers.

Is there anything else I could try out? I don’t understand why Firefox and IE are not rendering it whilst Webkit browsers do just fine.

On the same note, max-width: 100% works whilst max-height: 100% obviously does not. Strange that too such similar CSS rules don’t behave the same.

Hi,

Height or max-height will be zero if the immediate parent has no height defined or relies on content height. It doesn’t work the same as width and I would think chrome is incorrect in this instance.

If you want a 100% high container then you would need your banner at 25% height and main at 75% height but of course that means they cannot grow - which may be what you want. You would then need to add 100% height to the nested elements in order for the height to be effective. I would also assume that you would need to remove the width:auto from the image also unless you wanted that in percentages also.

e.g.


html,body,#hotspots,#landscapeOverview  { height:100%;margin:0;padding:0 }
#landscapeOverviewHelper{height:100%;float: none; }
#landscapeOverview img {
  display: block;
  height: auto;
  max-height: 99%;
  margin: 0 auto;
}
#banner{height:25%}

However, I’m not quite sure what your ultimate goal is here and the above may be wide of the mark. You can’t use height if you want elements to grow taller than the initial height (unless you use display:table). If you are fixing the height to the viewport and no more then the code above should work.