Scaling Div Height Proportional to Width Trick

Here is a really simple script that will allow you to scale background images and divs based upon the height width of the browser. This works great for banners.

The Html:

<div class="scaling-div">
  <span></span>
</div>

The CSS:

.scaling-div {
	background:url(your-image-here.jpg) no-repeat center center;
	width:100%;
	background-size:contain;
	position:relative;
	padding-bottom:27.08%;
}
.scaling-div span {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	display:block;
}

Set the padding-bottom to the correct percentage, to find this, take your background image height; which in my case was 390px and divide it by the pixel width, which for me was 1440px.

This 390/1440 = 27.08%

Codepen “Scaling Div” Example:

See the Pen scaling background div by Miles S (@milessebesta) on CodePen.