Aspect Ratio

Control the Aspect Ratio of elements

• SCSS Examples
• Implementation Guides
  • aspect-ratio-stretch-element()
  • aspect-ratio()
• Related Components

SCSS Examples

.square-aspect-ratio-example {
  @include aspect-ratio-stretch-element(1 1);
}

.16-9-aspect-ratio-example {
  @include aspect-ratio-stretch-element(16 9);
}

If you need more control over the parent and child element styling, or want an implementation closer to the native aspect-ratio CSS property, you can use the base aspect-ratio mixin:

.square-aspect-ratio-example {
  position: relative;
  @include aspect-ratio(1 1);

  // Sets any direct children to stretch across the aspect ratio defined on
  // the parent.
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.16-9-aspect-ratio-example {
  position: relative;
  @include aspect-ratio(16 9);

  // Sets any direct children to stretch across the aspect ratio defined on
  // the parent.
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Implementation Guides

aspect-ratio-stretch-element()

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

@include aspect-ratio-stretch-element();

aspect-ratio()

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

@include aspect-ratio();

Related Components

• Examples that use the Vue Aspect Ratio component