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.