How to make an image height resize accordingly to the size of the contents below it, in a fixed size container

Question

I understand this could be a hard one, I have 10+ years working with HTML, but I can't find a solution that doesn't involve working with complicated calculations with Javascript.

I have a fixed-size container divided in two, so the container has a top half and a bottom half. The top half has an image. The bottom half has text. What I want is that the image and the text occupy all the available space. If the text is short, there is more space available for the image. If the text is larger, the image is smaller, dynamically. I've added a couple of screenshots to illustrate what I want. In all cases, they occupy 100% of the available vertical space of the fixed-size container.

Answer 1

Here's a pure css approach

You can probably try using display: table-row

https://jsfiddle.net/4h37fv7o/

Try and modify the length of the text at the bottom and see the image resize.

There are some caveats but it works.

Alternatively, you can use flexbox albeit, using background image:

https://jsfiddle.net/kdm0amsx/1/

Answer 2

with little js/jquery code you can calculate the height of your container and the text, then resize the image!

DEMO: https://jsfiddle.net/L42hguqw/2/

using JQUERY:

var resizeUI = function(){
        var container = $('.container').eq(0);
        var textFrame = $('.container .textFrame');
        var maxH = container.innerHeight();
        var textH = textFrame.outerHeight();
        $('.container .imageFrame').height(parseInt(maxH-textH,10)).show();
    };

css:

div.container{
    background: #BB0000;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

div.imageFrame{
    max-width: 100%;
    max-height: 100%;
    display: none;
}
div.imageFrame img{
    display: block;
    height: 100%;
}

div.textFrame{
    max-width: 100%;
    max-height: 100%;
    background: #333;
    color: #DDD;
}

html:

<div class="container">
    <div class="imageFrame">
        <img src="http://www.conservatoryweb.co.uk/wp-content/uploads/2012/04/iStock_000011293178XSmallPaulMaguire.jpg"/>
    </div>

    <div class="textFrame">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
</div>