We Can Be Heros

The Responsive Hero Image

March 5, 2015 /

Today’s topic is the responsive hero image. Heros can be simple images with no additional markup. The browser will do the work and resize the image, but to get the best results we need to modify the aspect ratio to best serve all screen sizes from mobile to large.

First off, lets talk about aspect ratio. I feel aspect ratio is more important than actually pixel size when it comes to responsive. Maintaining the aspect ratio or in this case modifying it is the name of the game. Let’s look at a few common aspect ratios:

  1. Square or 1×1 – EG. 500px / 500px (use – product images)
  2. Landscape 4×3 – EG. 600px / 400px (use – small blog images)
  3. Portrait 3×4 – EG. 400px / 600px (use – small blog images)
  4. Wide 16×9 – EG. 1600px / 900px (use – featured images)

Any aspect ratio can be used, however your goal should be consistency. Nothing makes me cringe more than seeing a nice blog post ruined by 10 images with different ratios. Instead, pick a few that work well and stick with them.

For our hero we will use our wide 16×9 option. How do we change the image ratio? You don’t really change the image itself, instead change the container that holds it. That’s why we picked 16×9; it’s the max ratio we need. At a screen size of 480px and below we want to see the whole image. For larger view-ports we can clip off the unneeded parts.

To begin let’s look at some basic markup:

The HTML

<div class="hero-container">
	<div class="hero" style="background-image:url(hero.jpg);">
		<div class="dummy"></div>
	</div>
</div>

The CSS

.hero-container { background-color: #fff; }

.hero {
	position: relative;
	overflow: hidden;
	background: url() no-repeat scroll 50% 50%;
	background-size: 100% auto;
	max-height: 420px;
}

.hero .dummy {
    padding-top: 57.5%;
}

/* MEDIA QUERIES - extend if needed */
@media only screen and (min-width:768px) {
	.hero .dummy { padding-top: 40%; }
}

@media only screen and (min-width:960px) {
	.hero .dummy { padding-top: 33.333%; }
}

@media only screen and (min-width:1200px) {
	.hero .dummy { padding-top: 25%; }
}

Check out the working example.

The Explanation

Let’s dig in. There are four main things that make this work:

1) Background image positioned @ 50% 50%
Instead of using an inline image we leverage background-image. The real power here is the position property. It allows us to center align the image on vertical and horizontal axis. In this case we only care about the Y axis and vertically aligning the image within the hero.

2) Background size
The next important piece of our hero is the background-size property. It allows the image to fill 100% of the width, essential scaling it larger than its actual size. By setting height to “auto” the browser knows to keep the aspect ratio and never unevenly stretch the image.

3) Hero’s max-height
By applying max-height we can limit the height of our hero banner. In the web world we talk a lot about “above the fold“, so we restrict the height to ensure there is room for valuable content as well.

4) The dummy with padding
Now we have a hero with a background-image that fills the container and centers itself on the Y axis: but how does it resize? Enter the dummy – the dummy does the work and pushes the hero open, enabling us to see the image. How does the dummy push the hero open? Glad you asked. By setting the top padding to a % value. To calculate we use (height/width * 100):

Ex. The formula for our Wide 16×9 ratio: 9/16 * 100 = 56.25%

With these four powerful concepts in place we have a functional hero. Cool, you say – can I use it? Certainly, but bear in mind it’s a simple example. I have left out a few things, as you may have noticed. One in particular is:

There is only one large image!

Yes, I’ll further develop this concept in another post and show how to load smaller images for mobile view-ports and maybe even high-res displays!

OK nice, but what if I want to add text? That is a valid question that I will be addressing in part II: “I am Superman: Responsive Hero Panels”. I’ll show you how to extend the above case, add text, restrict the width, and make some cool panels. In the meantime enjoy today’s cat video!

« »