The Theme Designer’s Styles tab includes settings for the display of Image Elements on the page.
Easily set standard display parameters for images on your project pages
There are two settings available:
- Default Size
- Default Aspect Ratio
The Default Size sets the display size of the Image Element. The options are:
- Small
- Medium
- Large
- Natural (no sizing will be applied)
The Default Size is set to Natural unless you choose to change it for your theme.

Small, Medium and Large are essentially settings for the display height of the Image Element. They are set as ems, meaning they calculate their respective height setting as a factor of the body font size set in the theme.
If you select Small, Medium or Large you can also choose to set a Default Aspect Ratio.
The Default Aspect Ratio sets the display dimensions of the image within the Image Element. The options are:
- Square
- Standard (4:3)
- Widescreen (16:9)
- Natural (displays the image at its actual aspect ratio)
The Default Aspect Ratio is set to Natural unless you choose to change it for your theme.
If the image’s natural aspect ratio doesn’t match the set aspect ratio, the Square, Standard and Widescreen aspect ratios mask off (hide) portions of the image so it will display at the set aspect ratio.
By default the middle of the top of the image will be anchored in the middle of the top of the Image Element. Think of this as the thumbtack holding the image within the Image Element - the thumbtack is pinning the middle top of the image at the middle top of the Image Element.
For example, if you have an image that has a wide aspect ratio and set it to display as Square, the center of the image will be shown and the left and right edges will be masked (hidden) in the display.
Here's how the different aspect ratios will display on a Flow page when the image size is set as Small:

Image Settings on the Options tab
When you are working on a page, the Image Options tab has settings for Size and Aspect Ratio.
By default these are set to the Theme Default, but you can override these for the selected image element by selecting other sizes or aspect ratios.

Setting the Alignment of the Image within the Image Element
You can control how the image is aligned within the image element.
To do this, select the Container Inspector icon (1) then using the Image Alignment settings (2).
In a Claro page:
- Selecting left alignment, the left top corner of the image will be anchored in the left top corner of the image element.
- Selecting Center alignment, the middle top of the image will be anchored in the middle top of the image element.
- Selecting right alignment, the right top corner of the image will be anchored in the right top corner of the image element.

In a Flow page, these alignment settings will produce different display results depending on the size and aspect ratio settings and the image element size on the page.
For example, if the size is set to Small, the Aspect Ratio is Square and the element on the page is wider than the width of the Small Square Settings, the display effect will be that the square image shifts its alignment within the element, as shown in the top row of the image below.
But if the size is set to Large and the Aspect Ratio is 4:3 and the image element on the page isn't wide enough to display the full width of the set aspect ratio, the image will be masked with its hidden portions determined by the alignment setting, as shown in the second row of the image below.

Confirm
Comments ( 0 )
Sign in to join the discussion.