How to resize an image to fit the content size below in a container with a fixed size

Question

I understand that it can be difficult, I have more than 10 years of working with HTML, but I can not find a solution that is not related to working with complex calculations using Javascript.

I have a container with a fixed size, divided in two, so there is an upper half and a lower half in the container. The upper half has an image. The bottom half has text. I want the image and text to occupy all the free space. If the text is short, more space is available for the image. If the text is larger, the image will be smaller dynamically. I have added some screenshots to illustrate what I want. In all cases, they occupy 100% of the available vertical space of a container of a fixed size.

Answer 1

Here's a clean CSS approach

You can probably try using display: table-row

https://jsfiddle.net/4h37fv7o/

Try changing the length of the text below and see the size of the image.

There are some caveats, but it works.

Alternatively, you can use flexbox, though using a background image:

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

Answer 2

with a little js / jquery code, you can calculate the height of your container and text, and 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> 

Answer 3

You can use JS + CSS calc to get this effect. You will want to use JS to get the height of the text and apply cal to the height of the image to get its scalable match

 calc("100% - " + paragraphHeightVariable + "px - 2em") 

2em should consider filling the paragraph tag. The example below uses jQuery to get the paragraph height, but you can use the vanillajs library to get it.

 $(".container").each(function (a) { var $container = $(this); var $image = $container.children("img"); var $p = $container.children("p"); $image.css("height", "calc(100% - " + $p.height() + "px - 2em)"); console.log($image.css("height"), $p.height()); }); 

 .container { width:400px; height:450px; background-color:grey; } .container p { background-color:purple; } .container img { max-width:100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <img src="http://lorempixel.com/g/400/400/" /> <p>Hello World!</p> </div> <br/> <div class="container"> <img src="http://lorempixel.com/g/400/400/" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem. </p> </div> <br/> <div class="container"> <img src="http://lorempixel.com/g/400/400/" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem.Donec consectetur maximus mauris, egestas sollicitudin nunc imperdiet sit amet. Suspendisse ut consequat magna. In at eros mollis, malesuada arcu sit amet, imperdiet orci. Mauris vitae augue id nisi vulputate ultrices. Morbi a ipsum lacinia arcu consequat sollicitudin ut quis mauris. Quisque est dui, euismod non vestibulum sagittis, varius at elit. Maecenas facilisis tortor eget lorem aliquam, vel consequat lacus egestas. Nam vitae euismod nulla, in condimentum libero. Vivamus eget massa eros.</p> </div> 

Answer 4

Alternatively, perhaps the easiest way is to use the JavaScript function element.getBoundingClientRect (). This would require placing your text inside its own relative division, and then applying the specified function to calculate the height of your finished text (in pixels). Since you use fixed sizes for your main container unit, you can calculate and use the remaining space for your image. One or two complex little things needed here may be like designing proportions to fit the property of height.

Hope this helps; I'm not sure how complicated the approach you tried to avoid was.

  <head> <style> body{ background: #111; color: #d00; } #mainContainerDiv{ top: 20%; height: 49%; left: 30%; width: 40%; background: #c90; color: #d00; position: absolute; } #image{ top: 10%; height: 30%; left: 30%; width: 40%; background: #0d0; color: #ddd; position: absolute; } #textAtBottom{ bottom: 2%; /*height: 40%;*/ left: 30%; width: 40%; background: #d00; color: #eee; padding: 1%; position: absolute; } 

abc def ghi jkl abc def ghi jkl abc def ghi jkl abc def ghi jkl abc def ghi jkl abc def ghi jkl abc def ghi jkl abc def def ghi jkl lorem ipsum doradum etsum ichtum latinum

  <!-- <div id="image"> UNCOMMENT THIS WHEN YOU'RE READY </div> --> </div><!-- mainContainerDiv--> <script> var a = document.getElementById('mainContainerDiv'); var ar = a.getBoundingClientRect(); alert('Main container element is ' + ar.top + 'pixels from its containing element ie <body>'); // alert(' und hauptBeinhalter Unten ist ' + ar.bottom '); // Bildis niedriger, so Teil ist ' + ar.height-ar.top + 'hoch total'); var e = document.getElementById('textAtBottom'); var x = e.getBoundingClientRect(); alert('Text at Bottom starts ' + x.top + ' vertical pixels down from <body>'); var numm = parseInt(x.top)-parseInt(ar.top); alert('sooooo, you got '+ numm + ' pixels of space above the text to squeeze in your image!!!'); </script>