User Tools

Site Tools


phplugins_maintaining_the_masthead_s_aspect_ratio

Maintaining the Masthead's Aspect Ratio

For this tutorial, let's presuppose that you have a full-width masthead image, filling the masthead element entirely. Something like this:

Unfortunately, on smaller displays such as on iPads or iPhones, the masthead gets squeezed and we get empty space above and below our image. See the light green bars above and below our image:

This is undesirable. Happily, we can fix this with PHPlugins.


The Example

Here's an example gallery with our finished solution. Resize the browser window to see the masthead scale, maintaining its aspect ratio when the browser width is less than the masthead width.


Step 1: Setup Custom CSS

With PHPlugins enabled in our design, we need setup Custom CSS.


Step 2: Prepare a Good Masthead Graphic

Our masthead height will be dependent upon a percentage value. Therefore, it's best that our masthead graphic have a clean aspect ratio, preferably without decimals.

When creating your masthead graphic, keep its aspect ratio in mind. Specifically, the relationship of height to width, which we may calculate this way:

(image height) / (image width) = aspect ratio

For example, let's say our masthead width is 1140-pixels, as in the sample images in this tutorial. Our example masthead gives us:

399 / 1140 = 0.35 = 35%

Our height is 35% of our width. That's important, and we'll remember it. This is a clean value; no decimals!


Step 3: Our CSS

In our custom CSS file, we use this:

@media only screen and (max-width: 1140px) { /* set max-width as width of masthead graphic */

	.masthead .mantle {
	    float: left;
	    height: 0;
	    overflow: visible;
		padding: 0;
	    padding-bottom: 35%; /* our height percentage, calculated by our ratio in Step 2 */
	    position: relative;
	    width: 100%;
		}

	.masthead .core {
		height: 100%;
		position: absolute; left: 0; top: 0;
		width: 100%;
		}

	.masthead h1 {
		background-position: center center;
		background-size: cover;
		height: 100% !important;
		}

	} /* max-width: 1140px */

Take note of the comments in the code, on these lines:

@media only screen and (max-width: 1140px) { /* set max-width as width of masthead graphic */
	    padding-bottom: 35%; /* our height percentage, calculated by our ratio in Step 2 */

You will need to update the values on these lines to suit your own implementation.

Correctly implemented, our masthead's height now scales in accordance with its width. On iPad, for example, we now have this:

phplugins_maintaining_the_masthead_s_aspect_ratio.txt · Last modified: 2014/07/25 07:43 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.