An aspect ratio describes the relationship between an image's width and height. Aspect ratios are shown as a formula of width to height. For example, a square image has an aspect ratio of 1:1, since the height and width are the same.
When cropping images, it’s important to understand how the aspect ratio will affect your crop.
Text Sections - Image Aspect Ratios
If you wish to add a background image to a text section, you’ll be able to crop that image.
When you crop a background image for a text section, you crop for an aspect ratio of 5:4. How much of the cropped image is displayed will be determined by the content of the text section.
Tiles - Image Aspect Ratios
If you have chosen to use a grid section, you can then add a series of tiles. A number of tile styles allow you to add an image.
Tiles have different aspect ratios depending on their shape and size.
For example:
If a tile has a 1:1 aspect ratio, then both the width and height of the tile will always be the same. A 2:1 aspect ratio would mean that the width of the tile is always twice the height and setting the height to 200 would then require the width to be 400.
When cropping images to add to a tile, the cropping tool will assume you want the image to fit the size and shape of the tile you are aiming to add it to.
The cropper will do its best to set the aspect ratio values in line with the size and shape of the tile to which you are adding the image.
If you want to change the aspect ratio (i.e. the size and shape of the tile), you can do this before or after you crop the image you wish to add.
Tiles also remember your crops for an image. So if you have already cropped an image for a 2x1 tile and you resize another tile with that image to that size it will remember the last crop and set it automatically. This is true across sites and can be useful if you have one image reoccurring across multiple sites.
Aspect Ratios for Cropping Icons
When cropping tile indicators, video play icons, etc. you always crop with a 1:1 aspect ratio.
You can use the border-radius option to make the icon round.
To learn about cropping images, click here.