The aspect ratio setting in Instant allows you to maintain a consistent proportional relationship between the width and height of an element. This is essential for preserving the intended visual appearance of layouts and images when resizing them for different viewports.
Overview
Aspect ratio ensures elements maintain their proportions regardless of the available space. When you set an aspect ratio, the element automatically adjusts its height based on its width (or vice versa) to preserve the defined proportion.
Common Use Cases
Use Case | Description |
Images | Maintain consistent image proportions across viewports |
Video Containers | Preserve 16:9 ratio for video embeds |
Card Layouts | Keep product cards or content cards uniform |
Hero Sections | Control section height relative to width |
Supported Elements
Aspect ratio can be applied to:
Image layers
Row containers
Column containers
Ratio Options
Ratio | Name | Proportions | Common Use |
Auto | Automatic | No fixed ratio | Width and height adjust independently |
1:1 | Square | Equal width and height | Profile images, thumbnails, social media posts |
2:3 | Portrait | Taller than wide | Portrait photos, mobile screens, story formats |
3:2 | Landscape | Wider than tall | Photography, print media, horizontal images |
16:9 | Video | Widescreen | Video players, YouTube thumbnails, presentations |
Custom | Custom | User-defined | Any specific proportion needed |
Custom Ratio
Select Custom to define your own aspect ratio. Enter any values for width and height to create proportions that match your specific requirements.
Setting Up an Aspect Ratio
Step 1: Select the Element
Select the element you want to maintain the ratio for (image, row, or column).
Step 2: Open Ratio Options
In the right sidebar under Size, click on the Aspect Ratio option selector.
Step 3: Choose a Ratio
Select the ratio value you want to maintain from the available options.
Responsive Aspect Ratios
Aspect ratios can be configured differently for each viewport, allowing you to optimize your layout for every device type.
Example Configuration
Viewport | Recommended Ratio |
Desktop | 16:9 (landscape) |
Tablet | 3:2 (landscape) |
Mobile | 1:1 (square) or 2:3 (portrait) |
This flexibility ensures your content looks great across all devices without distortion or awkward cropping.
Quick Reference
Task | Location |
Access aspect ratio | Select element → Right sidebar → Size → Aspect Ratio |
Set preset ratio | Aspect Ratio dropdown → Select option |
Set custom ratio | Aspect Ratio → Custom → Enter width and height values |
Adjust per viewport | Switch viewport → Update Aspect Ratio setting |
Ratio Options Summary
Option | Ratio | Best For |
Auto | None | Flexible sizing without constraints |
Square | 1:1 | Thumbnails, avatars, icons |
Portrait | 2:3 | Vertical images, mobile-first content |
Landscape | 3:2 | Horizontal images, photography |
Video | 16:9 | Video embeds, widescreen content |
Custom | Any | Specific design requirements |