Screens... they come in all shapes and sizes! We can view and stream content on anything from a cell phone, to television, to HD projector, and so much in between. While this variety is great for the user, it can be really tricky for the developer to make a website look great on ANY screen size.

While most platforms are pre-built to adjust for screen-size, it does not always work smoothly for every element, especially one with specific dimensions. Sometimes the design calls for an element on the page to be of a certain aspect ratio and hold those proportions on any screen size. Of course, we can’t use fixed pixel units to do this because we want the element box to be responsive. We also can’t use percentage units because while that would take care of the width of the box, we would also need to set a height that is relative to the given width at any resolution, and that is not possible with CSS alone.

So what do you do?

The solution I propose is a clever technique whereby we apply padding to the inner content element that works out to the aspect ration that we went, no matter the screen size. In the following example, we will add an image that always scales to a 16:9 aspect ratio, but you could do 4:3 as well.

First we declare the box, and in this instance we will add an image inside of it. In order for the image to scale correctly within the box, it needs to be applied as a background image on a div rather than adding it as an image element.

<div class="box">
 <div class="image" style="background-image: url(image.jpg)"></div>
</div>

Then, We apply this CSS:

.box { position: relative; }

.box .image { display: block; width: 100%; height: 100%; padding-top: 56.25%; background-size: contain; background-position: center; background-repeat: no-repeat; }

Once this is done, we apply the padding to the image element and assign it 100% width and height, then we work out the padding value needed using the following formula:

height / width * 100

In this case it’s 9 / 6 * 100 = 56.25%. Or we wanted a perfect square aspect ratio we would use padding-top: 100%.

This set of code gives us this final result.

Such gorgeous scenery, and in the perfect aspect ratio! No matter the screen, no matter the user, no matter the picture or video, it will always show up exactly how you want it, so your website looks great in all sizes.

Looking for a developer? Look no further. Check out our Creative & Development services page.