Styling Elements

Aspect Ratios

General
Code Snippets

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;
}

Recommended Usage

Customization

Resources that mention this topic

No items found.
info

Get Help from a LiftKit Expert

arrow_forward
Book Quick Chat

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.

On This Page

Heading
Heading