Building Better Backgrounds
Zack Krida
1064

I feel too much JS for background-image implementation.

If we know image’s aspect ratio, I rather go with a “relative” solution than “dynamic” solution. As padding-top’s % unit resolves by width of an element, We better use “padding-top” in % unit. lets take 1000x300 image for example. Aspect ratio is 0.3 (300/1000). So, setting “padding-top:30%” to the element should do the trick.

In case of dynamic image, Calculate aspect ratio using JS. Then, set the padding-top in % unit once. No need to listen for resize event.