Set the height of an image to be equal to height of the viewport after subtracting height of header

Question

My idea is to have the image take the rest of the available viewport height after subtracting the height of the header. For example, if my viewport is 1000px height and my header is 100px height to make the image's height to 900px.

In the example below, I've set the max-height of the image to 100vh, however, since there's a header as well, a scrollbar appear to the side. I'm trying to make the max-height of the image be viewport minus header. Is it correct to assume this is done with JavaScript? Any tips or pointers to use in order to figure out how to do it?

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}
.navigation {
    background-color: #171717;
}
.navigation-ul {
    display: flex;
}
.navigation-ul>li:not(.dropdown) {
    padding: 15px 13px 15px 13px;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    color: white;
    background-color: #151719;
    list-style-type: none;
}
.specific-image-flexbox {
    display: flex;
}
.specific-image-column {
    flex: 4;
}
.specific-image-container {
    text-align: center;
    width: 100%;
}
.specific-image {
    display: block;
    max-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
        <div class="wrapper">
            <ul class="navigation-ul">
                <li><a href="">Images</a></li>
                <li><a href="">Albums</a></li>
            </ul>
        </div>
</nav>

<div class="specific-image-flexbox">

        <div class="specific-image-column">
            <div class='specific-image-container'>
                <img class='specific-image' src='https://odysseyonline-img.rbl.ms/simage/https%3A%2F%2Faz616578.vo.msecnd.net%2Ffiles%2F2016%2F07%2F18%2F636044656439844367681973023_453768-cats-cute.jpg/2000%2C2000/UWdtxOCqm5JAgBMr/img.jpg' alt='Random image' />
            </div>
        </div>
        
</div>

So the viewport height is also variable? Otherwise you it wouldn't make sense to set a fixed height for the image... — goulashsoup, Aug 05 '18 at 18:21
Don't know if the css Calc rule will work for you. But it allows you to do simple math, (i.e. if viewports' overall height is 700px and header height = 100px. You can use img{ height: Calc(700 - 100);) I think. — nocturns2, Aug 05 '18 at 18:21
I would want to recalculate the height of the image if the browser is resized so its not fixed — Onyx, Aug 05 '18 at 18:29

Louys Patrice Bessette · Accepted Answer · 2018-08-05T18:58:45.320

Assuming the nav height is not known, since I did not found it defined in the posted code.

I suggest you wait for the image being loaded to change it's height. So on a load event.

I also added the resize event, so you can see the effect in full page mode.

$(document).ready(function(){
  
  function fitImage(){
  
    var navHeight = $("nav.navigation").outerHeight();
    var viewport = $(window).height();
      $(".specific-image").height(viewport-navHeight);
  }
  
  // on load
  $(".specific-image").on("load",fitImage);
  
  // on resize
  $(window).on("resize",fitImage);
});

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}
.navigation {
    background-color: #171717;
}
.navigation-ul {
    display: flex;
}
.navigation-ul>li:not(.dropdown) {
    padding: 15px 13px 15px 13px;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    color: white;
    background-color: #151719;
    list-style-type: none;
}
.specific-image-flexbox {
    display: flex;
}
.specific-image-column {
    flex: 4;
}
.specific-image-container {
    text-align: center;
    width: 100%;
}
.specific-image {
    display: block;
    max-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="navigation-ul">
      <li><a href="">Images</a></li>
      <li><a href="">Albums</a></li>
    </ul>
  </div>
</nav>

<div class="specific-image-flexbox">
  <div class="specific-image-column">
    <div class='specific-image-container'>
      <img class='specific-image' src='https://odysseyonline-img.rbl.ms/simage/https%3A%2F%2Faz616578.vo.msecnd.net%2Ffiles%2F2016%2F07%2F18%2F636044656439844367681973023_453768-cats-cute.jpg/2000%2C2000/UWdtxOCqm5JAgBMr/img.jpg' alt='Random image' />
    </div>
  </div>
</div>

Yes it is true the nav height is not specifically set and your code works almost flawlessly and solves the problem I had but creates a new one. The images stretches if I resize the browser horizontally. I assume this is because we set the height of specific image to viewport-navHeight. Is there a way to set the max-height to viewport-navHeight instead of just height? Sorry for the late response. — Onyx, Aug 06 '18 at 01:49
If it "stretches", that is because you also defined the width somewhere. If you define just one of the two (height/width), the aspect ratio should remain. — Louys Patrice Bessette, Aug 06 '18 at 01:55
Yes, I have set the max-width to 100% so the image can scale up and down. Is there a way to incorporate both traits? — Onyx, Aug 06 '18 at 01:58
I don't need the image to always take viewport-navHeight max-height, only when it is bigger/higher than viewport-navHeight, this is why I'm using max-height. If the image is 500px and the viewport is 1000px, it should still stay as 500px. Also I want it to scale down when browser is resized horizontally, that's why I've set max-width to 100%. — Onyx, Aug 06 '18 at 02:06
Try `$(".specific-image").css({"max-height":viewport-navHeight});` in the fitImage() function. It possibly is what you want. — Louys Patrice Bessette, Aug 06 '18 at 02:10

score -1 · Answer 2 · answered Aug 05 '18 at 18:40

Try it like that (to force dynamically update without knowing header's height):

(function(){
  var viewportHeight = window.innerHeight;
  var headerEl = document.querySelector("nav.navigation");
  var specImgFlex = document.querySelector("div.specific-image-flexbox");


  var updateHeight = function(){
    var restWithoutHeader = window.innerHeight - headerEl.getBoundingClientRect().height;
    specImgFlex.style.height = restWithoutHeader + "px";
  };

  window.addEventListener("load", updateHeight);
  window.addEventListener("resize", updateHeight);
})();

Set the height of an image to be equal to height of the viewport after subtracting height of header

2 Answers2