Image aspect ratios

The aspect ratio on an image is the ratio of the image's width to its height.

When the width is the same as the height, the shape is square. When the width is larger, it is landscape, and when the width is smaller, it is portrait.

When images are displayed next to each other, in order for them to appear neatly, they should ideally all use the same aspect ratio. Although if the images have white backgrounds, the aspect ratio will not be as important.


Image containers

When we build your website we provide space for images. These spaces we call 'image containers'.

In the example below, all of the images containers are square.

In the example below you can see how nice and neat the images look when placed into these image containers.

This is because they all have the same aspect ratio (the same as is used for the image containers), i.e. square.

Now consider the next example where the images have the same width but the images shown don't all have the same aspect ratio.

It doesn't produce as nearly as good an effect. The images look messy and jumbled.


Filling the entire image container

By default, we set all the image containers on your website with a certain setting.

That certain setting means that the entire image container is filled with your image, and the website will automatically hide the top and bottom (or left and right) of the image (depending on whether the image is landscape or portrait).

Consider the example below.

The image appears to be square, but look at the image below...

...actually the top and bottom of the image is being hidden from view, so an image that is actually portrait is displaying as square.

The disadvantage with this method is that it could hide certain parts of the image that you actually want to show, and because it happens automatically you don't have any control over what parts of the image it hides.

The advantage is that it is an easier solution for you than changing the aspect ratio of all your images with image editing software.

Important!

You can turn off this feature on your website by following the instructions in the article Why are my images being cut off?

Changing the aspect ratio of your images

To change the aspect ratio you'll need to have access to image editing software (like Photoshop).

You need to set the dimensions of the new image to be the same aspect ratio as the image you want to upload. Then place the existing image onto the new image canvas and save the new image.

There are many different web based and software tools to be able to change the aspect ratio of your images and so we can't give you specific instructions on how to do this.

Important!

Please note that we cannot help you to change the aspect ratios of your actual images - you will need to contact a third party image editor.

Changing the aspect ratio of your image containers

You can however, if you prefer, change the aspect ratio used for your image containers. This is a quicker solution because you don't have to change individual images, just make one change to your theme.

So if image containers are square, you can set them to be portrait (or landscape) depending on what the aspect ratio of your images are.

To change the aspect ratios of your image containers you can directly edit the CSS of your theme using the theme file editor.

Ask us to help

Alternatively we can change the aspect ratio of your image containers for you. If you'd like us to then please contact us and ask us to make the change. There may be a small charge for this service.