Aspect Ratios

LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.

Choose a Starter Kit

Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.

Webflow

open_in_new

Figma

open_in_new

GitHub

open_in_new

Quickstart

Get a feel for LiftKit by following along with this short tutorial.

Video blocked because YouTube uses Cookies. Allow cookies to view.

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

An "aspect ratio" is the ratio of an element's width to its height. It's most commonly used with images, but in CSS, it can apply to other things.

Either the width or the height of the element you're applying an aspect ratio to must be fixed, with the other one set to auto, otherwise it won't work. If both are fixed, or if both are set to auto, it will result in unexpected behavior.

Quick Reference

Class Name	CSS Properties	Description
`.aspect__16x9`	`aspect-ratio: 16 / 9;`	Sets the aspect ratio to 16:9.
`.aspect__4x3`	`aspect-ratio: 4 / 3;`	Sets the aspect ratio to 4:3.
`.aspect__3x2`	`aspect-ratio: 3 / 2;`	Sets the aspect ratio to 3:2.
`.aspect__9x16`	`aspect-ratio: 9 / 16;`	Sets the aspect ratio to 9:16.
`.aspect__1x1`	`aspect-ratio: 1;`	Sets the aspect ratio to 1:1.

content_copy

Copy Code

.aspect__16x9 {
  aspect-ratio: 16 / 9;
}

.aspect__4x3 {
  aspect-ratio: 4 / 3;

}

.aspect__3x2 {
  aspect-ratio: 3 / 2;
}

.aspect__9x16 {
  aspect-ratio: 9 / 16;
}

.aspect__1x1 {
  aspect-ratio: 1;
}

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.

Get Help from a LiftKit Expert

Aspect Ratios

Choose a Starter Kit

Quickstart

Overview

Give Us Feedback

On This Page