Aspect Ratio Lock for Banner Images

CraigCoxson

.campaign-public-layout #banner-container .campaign-banner-image {
display: block;
height: 0;
padding-bottom: 42.86%;
overflow: hidden;
}

This sets the Banner to a specific aspect ratio. In my case it is 7:3. The % (which controls the height of the box) is figured as: (W / H) * 100

CraigCoxson

Oops. Math problem. The formula is (H / W) * 100. Sorry, this should work a little better.

GamingMegaverse

Used it- works great! Thanks Craig!

ChainsawXIV

Alternatively, the following should do all the math for you, scaling the banner so it fits in the standard space they've allotted (and fixes the small banners on private pages gracefully too):

.campaign-banner-image{ background-size: 100%; background-repeat: no-repeat; }