Setting a div's height responsively through CSS

Question

I need to find a way to set a div's height (in px) responsively depending on the window width. I am using Bootstrap 3, and can use media queries to set the height at specific breakpoint widths, but when you reach less than 767px the page content becomes full-width and "fluid", changing size constantly.

A JSFiddle of my problem: https://jsfiddle.net/qd7t1p8j/2/ (Resize the output window to <767px sizes to see the problem - note the gold background color).

This is my code right now:

HTML:

<div class="header-banner"></div>

CSS:

.header-banner {
  margin-bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 1199px) {
  .header-banner {
    height: 145px !important;
    background-image: url('http://placehold.it/1314x167/');
  }
}

@media screen and (max-width: 1199px) {
  .header-banner {
    height: 120px !important;
    background-image: url('http://placehold.it/1314x167/');
  }
}

@media screen and (max-width: 991px) {
  .header-banner {
    height: 103px !important;
    background-image: url('http://placehold.it/1170x167/');
  }
}

@media screen and (max-width: 767px) {
  .header-banner {
    height: 170px !important;
    background-image: url('http://placehold.it/768x170/');
    background-color: gold;
  }
}

Ideally I would like to be able to do this purely through CSS, and not checking the window's size via JavaScript (as it might not always be on the client's machine).

I have tried to change my background-size property to cover at the smallest screen size, but this actually hides content of the image as you shrink.

I'm not following 100% here. What is the requirement that the DIV have a certain height? — hungerstar, Feb 21 '17 at 15:39
Nope, it's not the image's height that I want changing. It's the div's height (note the question title) I want changing - to match the height of the image. — mpdc, Feb 21 '17 at 15:40
@MichaelCoker - Exactly like that. How did you determine that padding's % value? — mpdc, Feb 21 '17 at 15:41
@mpdc then why set a height on the DIV at all? The DIV will match the height of the image (when using ``). — hungerstar, Feb 21 '17 at 15:41
@hungerstar No, it won't as the image is a background-image. — mpdc, Feb 21 '17 at 15:42
@mpdc that's why you use `` and make it a responsive one if needed. Is there a requirement that it be a background image? — hungerstar, Feb 21 '17 at 15:43
Because I need to change which image is displayed at different breakpoints via media queries, I need to do it via CSS - hence the background-image. — mpdc, Feb 21 '17 at 15:44
@mpdc this post may or may not be helpful to you, [A collection of possible methods to set images from CSS](http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css#29371024). — hungerstar, Feb 21 '17 at 15:50

score 1 · Accepted Answer · answered Feb 21 '17 at 15:46

You can divide the height of the image by the width to get the aspect ratio of the image as a percentage, then use that as padding in the div to create the same aspect ratio in the div.

body {
  background: gray;
}

.container {
  background: white;
}

.header-banner {
  margin-bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.navbar {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.navbar-inverse {
  border-color: #9a1114;
  background-color: #cd171a;
}

.navbar-inverse .navbar-nav > li > a {
  color: white;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  background-color: #9a1114;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #9a1114;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #9a1114;
}

.navbar-inverse .navbar-toggle {
  border-color: #9a1114;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #9a1114;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #9a1114;
}

@media (max-width: 991px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: white;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    background-color: #9a1114;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 10px 15px;
  }
  .dropdown-menu {
    padding: 0;
  }
}

@media screen and (min-width: 1199px) {
  .header-banner {
    height: 145px !important;
    background-image: url('http://placehold.it/1314x167/');
  }
}

@media screen and (max-width: 1199px) {
  .header-banner {
    height: 120px !important;
    background-image: url('http://placehold.it/1314x167/');
  }
}

@media screen and (max-width: 991px) {
  .header-banner {
    height: 103px !important;
    background-image: url('http://placehold.it/1170x167/');
  }
}

@media screen and (max-width: 767px) {
  .header-banner {
    height: 0!important;
    padding-top: 22.13541667% !important;
    background-image: url('http://placehold.it/768x170/');
    background-color: gold;
  }
}

<div class="container">
  <p class="header-banner">

  </p>
  <div class="navbar navbar-inverse">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" style="padding: 0">
      <ul class="nav navbar-nav" style="margin: 0">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">EXAMPLE</a></li>
        <li><a href="#">EXAMPLE 2</a></li>
      </ul>
    </div>
  </div>
</div>

Setting a div's height responsively through CSS

1 Answers1