Do You Want to Learn Marketing or Coding? Do You Want to Learn Marketing or Coding?

Scaling Div Height Proportional to Width Trick

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

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.

I Really Need

Reviewing nerdy stuff is expensive.

Consider clicking on this ad & buying that item you REALLY wanted from Amazon.

It helps a ton!

Leave Your Thoughts