# Aspect Ratio

Control the Aspect Ratio of elements

How is this different than setting a static width and height?

When you use an aspect-ratio to define proportions, the element can shrink and grow with its parent container while still maintaining its proportions. This is useful when working with images in fluid containers. Learn more about aspect ratio here (opens new window).

# Examples

# An image with a 16x9 ratio

# An image with a 4x3 ratio

# SCSS

For examples using SCSS, view the Aspect Ratio Utilities.

# API for Vue Components

# SkyRatio

Props
Slots
Have an idea to help us improve?

Have an idea to help us improve?

Send Feedback
We Support Truth and Reconciliation
Skyline is created on the following traditional unceded territories of:

Niitsítpiis-stahkoii ᖹᐟᒧᐧᐨᑯᐧ ᓴᐦᖾᐟ (Blackfoot / Niitsítapi ᖹᐟᒧᐧᒣᑯ)

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Ktunaxa ɁamakɁis

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Tsuu T'ina

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Michif Piyii (Métis)

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Coast Salish

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Á,LEṈENEȻ ȽTE (W̱SÁNEĆ)

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Lekwungen/Songhees

(This is one of the traditional unceded territories that Skyline is created on (opens in new tab))

Learn More