How to get div height to auto-adjust to background size?

CSS magic: dynamic height with content inside

If your div is more than a pretty face and contains content, it needs more flexibility. Aim for responsive design, and here is a spell to make your div bigger on the inside:

.responsive-background::after {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* same 16:9 ratio, don't swap contents with padding because it'll end up in Narnia */
}


Proactive responsiveness with viewport

In a responsive design, div dimensions should adjust to your screen size, even when it's unexpected. If you, like me, need extra control, just calc() it:

.responsive-background {
  height: calc(100vw * (9 / 16)); /* because maths is the key to survival */
}


This way you make the div's height directly tied to viewport width so it will adapt like a chamelon.

Advanced, yet solid: overlay and positioning

Work with overlay content? It's much like building with Legos, remember to position your blocks properly:

.responsive-background {
  position: relative;
}

.overlay-content {
  position: absolute; /* because we don't like gravity, make sure content floats perfectly */
}


Hovering content works better with absolute positioning inside a relative div, for that irresistible flexibility.

Ninja tactics for flexibility

Hidden Image Technique

Use the hidden image technique, much like an undercover agent for your div:

<div class="responsive-background">
  <img src="image.jpg" aria-hidden="true" style="visibility: hidden; position: absolute;"/>
</div>


The browser will load the image, but it'll stay unseen like a phantom, while adjusting the div's height.

JavaScript for Dynamic Backgrounds

For you JavaScript junkies, cause plain old CSS just won't cut it, here's for some fancy dynamic magic:

const image = new Image();
image.onload = function() {
  const heightRatio = this.height / this.width * 100;
  const div = document.querySelector('.responsive-background');
  div.style.paddingTop = `${heightRatio}%`; /* perfect fit every time, it does the laundry too */
};
image.src = 'image.jpg';


Server-side Image Measurements

Go full detective and do some server-side preprocessing to tailor your div's dimensions:

<div class="responsive-background" style="padding-top: <%= calculatedHeightRatio %>%;">
