how to make image occupy remaining height, and determine width

Question

Consider this question and its selected answer.

I have used the code of the selected answer in the code below, changing #div1 to .header and #div2 to .contents and placing both divs in a container.

What I need is this: in the .contents div an image should be placed. This image should be the same height as the .contents div (so occupying remaining height in the container). The width of the image should be auto, to maintain aspect ratio.

Now the question is: how can I manage all divs to have the same width as the computed width of the image?

The following code does all the things described above, except the divs don't have the same width as the image.

    .container {
      position: absolute;
      height: 60%; /* this is a requirement, height should be a percentage */
      width: 40%;  /* this line should be removed, width should be width of the image */
      border: 5px solid black;   
    }
    .header {
   width: 100%; /* width should be width of the image */
      height: 100px; 
      background: red;
    }
    .contents {
      width: 100%; /* width should be width of the image */
      position: absolute;
      top: 100px;
      bottom: 0;
      background: blue;
    }
    .contents img {
      height: 100%;
      width: auto; /* width should be computed considering height and keeping aspect ratio */
    }

 <div class="container">
      <div class="header"></div>
      <div class="contents">
        <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" title="" />
      </div>
    </div>

If possible I prefer a solution without javascript.

score 0 · Accepted Answer · answered Jul 24 '17 at 21:21

        
 html, body, .shell {
      height: 100%; // every parent element needs specified height
}

    .container {
  display: inline-block;
      height: 60%; /* this is a requirement, height should be a percentage */
      //width: 40%;  /* this line should be removed, width should be width of the image */
      border: 5px solid black;   
    }
    .header {
   width: 100%; /* width should be width of the image */
      height: 100px; 
      background: red;
    }
    .contents {
      height: calc(100% - 100px);
      top: 100px;
      bottom: 0;
      background: blue;
    }
    .contents img {
      height: 100%;
      width: auto; /* width should be computed considering height and keeping aspect ratio */
    }

 <div class="shell">
   <div class="container">
        <div class="header"></div>
        <div class="contents">
        <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" title="" />
      </div>
   </div>
 </div>

Nice! Very elegant. Thank you. The "top:100px; bottom:0;" can be removed, since the positioning is not absolute anymore in your code. Furthermore, when resizing the browser window in IE, Opera and Chrome the image breaks out of the container div. Therefore I added: $(window).resize(function(){ $('img').hide(); setTimeout(function(){$('img').show();}, 1); }) — Michiel, Jul 24 '17 at 22:32

how to make image occupy remaining height, and determine width

1 Answers1